Создание собственного плагина для обмена социальными сетями для WordPress

Теперь давайте отобразим раздел и его поля параметров.

 function social_share_settings() { add_settings_section("social_share_config_section", "", null, "social-share"); add_settings_field("social-share-facebook", "Do you want to display Facebook share button?", "social_share_facebook_checkbox", "social-share", "social_share_config_section"); add_settings_field("social-share-twitter", "Do you want to display Twitter share button?", "social_share_twitter_checkbox", "social-share", "social_share_config_section"); add_settings_field("social-share-linkedin", "Do you want to display LinkedIn share button?", "social_share_linkedin_checkbox", "social-share", "social_share_config_section"); add_settings_field("social-share-reddit", "Do you want to display Reddit share button?", "social_share_reddit_checkbox", "social-share", "social_share_config_section"); register_setting("social_share_config_section", "social-share-facebook"); register_setting("social_share_config_section", "social-share-twitter"); register_setting("social_share_config_section", "social-share-linkedin"); register_setting("social_share_config_section", "social-share-reddit"); } function social_share_facebook_checkbox() { ?> <input type="checkbox" name="social-share-facebook" value="1" <?php checked(1, get_option('social-share-facebook'), true); ?> /> Check for Yes <?php } function social_share_twitter_checkbox() { ?> <input type="checkbox" name="social-share-twitter" value="1" <?php checked(1, get_option('social-share-twitter'), true); ?> /> Check for Yes <?php } function social_share_linkedin_checkbox() { ?> <input type="checkbox" name="social-share-linkedin" value="1" <?php checked(1, get_option('social-share-linkedin'), true); ?> /> Check for Yes <?php } function social_share_reddit_checkbox() { ?> <input type="checkbox" name="social-share-reddit" value="1" <?php checked(1, get_option('social-share-reddit'), true); ?> /> Check for Yes <?php } add_action("admin_init", "social_share_settings"); 

Здесь мы позволяем пользователю выбирать кнопки Facebook, Twitter, LinkedIn и Reddit. Мы предоставляем интерфейс с флажками, чтобы администраторы могли выбирать, какие кнопки отображать. Вы можете расширить список, чтобы поддерживать больше социальных сетей по мере необходимости.

Вот как выглядит наша последняя страница настроек:

Отображение кнопок социальных сетей

Чтобы кнопки социальных сетей отображались под каждым сообщением, нам необходимо отфильтровать содержимое каждого сообщения перед его отправкой. Нам нужно использовать фильтр the_content чтобы добавить кнопки социальных сетей в конец сообщений.

Вот код о том, как фильтровать содержимое публикации и отображать кнопки социальных сетей.

 function add_social_share_icons($content) { $html = "<div class='social-share-wrapper'><div class='share-on'>Share on: </div>"; global $post; $url = get_permalink($post->ID); $url = esc_url($url); if(get_option("social-share-facebook") == 1) { $html = $html . "<div class='facebook'><a target='_blank' href='http://www.facebook.com/sharer.php?u=" . $url . "'>Facebook</a></div>"; } if(get_option("social-share-twitter") == 1) { $html = $html . "<div class='twitter'><a target='_blank' href='https://twitter.com/share?url=" . $url . "'>Twitter</a></div>"; } if(get_option("social-share-linkedin") == 1) { $html = $html . "<div class='linkedin'><a target='_blank' href='http://www.linkedin.com/shareArticle?url=" . $url . "'>LinkedIn</a></div>"; } if(get_option("social-share-reddit") == 1) { $html = $html . "<div class='reddit'><a target='_blank' href='http://reddit.com/submit?url=" . $url . "'>Reddit</a></div>"; } $html = $html . "<div class='clear'></div></div>"; return $content = $content . $html; } add_filter("the_content", "add_social_share_icons"); 

Вот как работает этот код:

• Сначала мы добавляем оболочку для наших ссылок в социальных сетях.
• Затем мы извлекаем полный URL-адрес текущей записи, которая будет опубликована на сайтах социальных сетей. Мы также esc_url URL с esc_url функции esc_url предоставляемой WordPress.
• Затем мы проверяем, какие кнопки хотят отображать пользователи, и добавляем соответствующую разметку кнопок в содержимое публикации.
• Наконец, мы добавляем URL текущей записи в конец ссылок на социальные сети на соответствующих сайтах социальных сетей.

Вот как выглядят наши кнопки в социальных сетях в начале каждого поста:

Стилизация кнопок социальных сетей

Давайте прикрепим style.css к style.css интерфейсу, внутри которого мы разместим код для стилизации кнопок. Вот код, ставящий в style.css файл style.css .

 function social_share_style() { wp_register_style("social-share-style-file", plugin_dir_url(__FILE__) . "style.css"); wp_enqueue_style("social-share-style-file"); } add_action("wp_enqueue_scripts", "social_share_style"); 

Вот код CSS для стилизации кнопок:

 .social-share-wrapper div { float: left; margin-right: 10px; } .social-share-wrapper div.share-on { padding: 5px; font-weight: bold; } .social-share-wrapper div.facebook { background-color: #3a5795; padding: 5px; } .social-share-wrapper div.facebook a { color: white; } .social-share-wrapper div.twitter { background-color: #55acee; padding: 5px; } .social-share-wrapper div.twitter a { color: white; } .social-share-wrapper div.linkedin { background-color: #007bb6; padding: 5px; } .social-share-wrapper div.linkedin a { color: white; } .social-share-wrapper div.reddit { background-color: #ACD4FC; padding: 5px; } .social-share-wrapper div.reddit a { color: white; } .social-share-wrapper div a { text-decoration: none; border: none; } .clear { clear: left; } 

Вывод

В этой статье я показал вам, как легко создать свой собственный плагин для обмена в социальных сетях. Теперь вы можете пойти дальше и расширить это, чтобы добавить кнопки для большего количества сайтов социальных сетей, а также отобразить количество акций вместе с кнопками. Пожалуйста, поделитесь своим опытом с вашими собственными плагинами ниже.