ru
Visit TemplateMonster
Submit a Ticket

Categories

Новые шаблоны

ru
Visit TemplateMonster Account
Submit a Ticket

Categories

Новые шаблоны

MonsterONE Subscrioption

MonsterONE

WordPress. Как работать с виджетом социальных иконок (на основе Cherry Framework 3.x)

Carey Burns Февраль 6, 2015
CherryiconsmanagesocialwidgetWordPresswork
Rating: 5.0/5. From 1 vote.
Please wait...

Команда технической поддержки представляет вашему вниманию новый туториал, из которого вы узнаете, как работать с социальными иконками (на основе Cherry Framework).

WordPress. Как работать с виджетом социальных иконок (на основе Cherry Framework)

Для того, чтобы добавить виджет на сайт, выполните следующее (если вы использовали демо-данные шаблона, он должен быть уже включен):

  1. Перейдите во вкладку Внешний вид (Appearance) > Виджеты (Widgets) в консоли WordPress.

  2. В разделе Доступные Виджеты (Available Widgets) найдите Cherry — Social Networks.

  3. Переместите этот Cherry — Social Networks виджет в необходимую область виджетов:

    wordpress_how_to_work_with_social_netwroks_1

  4. По умолчанию, в виджете доступны 7 социальных сетей. Для каждой иконки доступны два параметра: Ссылка (URL) и метка (label).

  5. Вы можете флажком отметить, что должно быть отображено на сайте:

    wordpress_how_to_work_with_social_netwroks_2

  6. Для отображения иконки вам надо будет заполнить поля ссылки и метки (url/label). Иконки с пустыми полями не будут отображаться.

  7. После завершения редактирования, нажмите кнопку Сохранить (Save) внизу.

  8. Обновите сайт, чтобы увидеть изменения.

Для того, чтобы заменить иконки социальных сетей, вам надо будет заменить исходные файлы .png в папке wp-content/themes/theme#####/images/icons на вашем сервере, загружая новые .png изображения с теми же названиями.

Для того, чтобы ссылки открывались в новом окне, пожалуйста, выполните следующее:

  1. Откройте каталог wp-content/themes/theme#####/includes/widgets/ на сервере. Проверьте, находится ли в этой папке файл my-social-widget.php.

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

    1. Перейдите в папку  wp-content/plugins/cherry-plugin/includes/widgets с помощью FTP или менеджера файлов на хостинге. Скачайте файл my-social-widget.php.

    2. Скопируйте/переместите скопированный файл в папку wp-content/themes/theme#####/includes/widgets.

  3. Откройте файл my-social-widget.php для редактирования.

  4. Нажмите кнопки Ctrl + F на клавиатуре и найдите следующую строку текста:

    		 <a class="social_link social_link__<?php echo strtolower($network); ?>" rel="tooltip" data-original-title="<?php echo strtolower($network); ?>" href="<?php echo $networks[$network]['link']; ?>">

  5. Добавьте атрибут target=»_blank» после атрибута href=»». Код должен выглядеть следующим образом:

    		 <a class="social_link social_link__<?php echo strtolower($network); ?>" rel="tooltip" data-original-title="<?php echo strtolower($network); ?>" href="<?php echo $networks[$network]['link']; ?>" target="_blank">

  6. Сохраните изменения и проверьте социальные иконки сайта.

Для создания новой иконки соцсети, например, для социальной сети Picasa (вам надо будет просто заменить слова «Picasa» и «picasa» в тексте этого туториала, если вы добавляете другую иконку, к примеру, «Lastfm»/»lastfm», «Tumblr»/»tumblr» и т. д.), пожалуйста, следуйте этой инструкции:

  1. Перейдите в папку wp-content/themes/theme#####/includes/widgets/ на вашем сервере.

  2. Откройте файл my-social-widget.php.

  3. Под текстом (любую из строк можно найти с помощью Ctrl + F):

    		 $networks['Twitter']['link'] = $instance['twitter'];
		 $networks['Facebook']['link'] = $instance['facebook'];
		 $networks['Flickr']['link'] = $instance['flickr'];
		 $networks['Linkedin']['link'] = $instance['linkedin'];
		 $networks['Delicious']['link'] = $instance['delicious'];
		 $networks['Youtube']['link'] = $instance['youtube'];

    добавьте:

    		 $networks['Picasa']['link'] = $instance['picasa'];

  4. Под текстом:

    		 $networks['Twitter']['label']   = $instance['twitter_label'];
		 $networks['Facebook']['label']  = $instance['facebook_label'];
		 $networks['Flickr']['label']    = $instance['flickr_label'];
		 $networks['Instagram']['label']      = $instance['instagram_label'];
		 $networks['Rss']['label']  = $instance['rss_label'];
		 $networks['Delicious']['label'] = $instance['delicious_label'];
		 $networks['Linkedin']['label']   = $instance['linkedin_label'];
		 $networks['Google_plus']['label']   = $instance['google_plus_label'];

    добавьте:

    		 $networks['Picasa']['label']   = $instance['picasa_label'];

  5. Замените:

    		 <?php foreach(array("Facebook", "Twitter", "Flickr", "Instagram", "Rss", "Delicious", "Linkedin", "Google_plus") as $network) : ?>

    на:

    		 <?php foreach(array("Facebook", "Twitter", "Flickr", "Instagram", "Rss", "Delicious", "Linkedin", "Google_plus", "Picasa") as $network) : ?>

  6. Под текстом:

    		 $instance['twitter']         = $new_instance['twitter'];
		 $instance['facebook']        = $new_instance['facebook'];
		 $instance['flickr']          = $new_instance['flickr'];
		 $instance['instagram']           = $new_instance['instagram'];
		 $instance['rss']       		 = $new_instance['rss'];
		 $instance['delicious']       = $new_instance['delicious'];
		 $instance['linkedin']       = $new_instance['linkedin'];
		 $instance['google_plus']     = $new_instance['google_plus'];

    добавьте:

    		 $picasa                       = $instance['picasa'];

  7. Под текстом:

    		 $instance['twitter_label']   = $new_instance['twitter_label'];
		 $instance['facebook_label']  = $new_instance['facebook_label'];
		 $instance['flickr_label']    = $new_instance['flickr_label'];
		 $instance['instagram_label']     = $new_instance['instagram_label'];
		 $instance['rss_label'] 		 = $new_instance['rss_label'];
		 $instance['delicious_label'] = $new_instance['delicious_label'];
		 $instance['linkedin_label'] = $new_instance['linkedin_label'];
		 $instance['google_plus_label'] = $new_instance['google_plus_label'];

    добавьте:

    		 $instance['picasa_label'] = $new_instance['picasa_label'];

  8. Замените:

    		 $defaults = array( 'title' => '', 'twitter' => '', 'twitter_label' => '', 'facebook' => '', 'facebook_label' => '', 'flickr' => '', 'flickr_label' => '', 'instagram' => '', 'instagram_label' => '', 'rss' => '', 'rss_label' => '', 'delicious' => '', 'delicious_label' => '', 'linkedin' => '', 'linkedin_label' => '', 'google_plus' => '', 'google_plus_label' => '', 'display' => 'icons', 'text' => '');

    на:

    		 $defaults = array( 'title' => '', 'twitter' => '', 'twitter_label' => '', 'facebook' => '', 'facebook_label' => '', 'flickr' => '', 'flickr_label' => '', 'instagram' => '', 'instagram_label' => '', 'rss' => '', 'rss_label' => '', 'delicious' => '', 'delicious_label' => '', 'linkedin' => '', 'linkedin_label' => '', 'google_plus' => '', 'google_plus_label' => '', 'picasa' => '', 'picasa_label' => '', 'display' => 'icons', 'text' => '');

  9. Под текстом:

    		 $twitter         = $instance['twitter'];
		 $facebook        = $instance['facebook'];
		 $flickr          = $instance['flickr'];
		 $instagram           = $instance['instagram'];
		 $rss       		 = $instance['rss'];
		 $delicious       = $instance['delicious'];
		 $linkedin       = $instance['linkedin'];
		 $google_plus     = $instance['google_plus'];

    добавьте:

    		 $instance['picasa'] = $new_instance['picasa'];

  10. Под текстом:

    		 $twitter_label   = $instance['twitter_label'];
		 $facebook_label  = $instance['facebook_label'];
		 $flickr_label    = $instance['flickr_label'];
		 $instagram_label     = $instance['instagram_label'];
		 $rss_label  	 = $instance['rss_label'];
		 $delicious_label = $instance['delicious_label'];
		 $linkedin_label = $instance['linkedin_label'];
		 $google_plus_label = $instance['google_plus_label'];

    добавьте:

    		 $picasa_label = $instance['picasa_label'];

  11. Под текстом:

    	 <fieldset style="border:1px solid #dfdfdf; padding:10px 10px 0; margin-bottom:1em;">
		<legend style="padding:0 5px;"><?php echo 'Google+'; ?>:</legend>
		<p>
			<label for="<?php echo $this->get_field_id('google_plus'); ?>"><?php echo 'Google+ URL:'; ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('google_plus'); ?>" name="<?php echo $this->get_field_name('google_plus'); ?>" type="text" value="<?php echo esc_attr($google_plus); ?>" /></p>
		<p>
			<label for="<?php echo $this->get_field_id('google_plus_label'); ?>"><?php echo 'Google+ '.theme_locals("label"); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id('google_plus_label'); ?>" name="<?php echo $this->get_field_name('google_plus_label'); ?>" type="text" value="<?php echo esc_attr($google_plus_label); ?>" />
		</p>
	</fieldset>

    Добавьте:

    	 <fieldset style="border:1px solid #dfdfdf; padding:10px 10px 0; margin-bottom:1em;">
		<legend style="padding:0 5px;"><?php echo 'Picasa' ?>:</legend>
	<p><label for="<?php echo $this->get_field_id('picasa'); ?>"><?php echo 'Picasa:' ?></label>
	<input class="widefat" id="<?php echo $this->get_field_id('picasa'); ?>" name="<?php echo $this->get_field_name('picasa'); ?>" type="text" value="<?php echo esc_attr($picasa); ?>" /></p>
	<p><label for="<?php echo $this->get_field_id('picasa_label'); ?>"><?php echo 'Picasa '.theme_locals("label") ?></label>
		<input class="widefat" id="<?php echo $this->get_field_id('picasa_label'); ?>" name="<?php echo $this->get_field_name('picasa_label'); ?>" type="text" value="<?php echo esc_attr($picasa_label); ?>" /></p>
	</fieldset>

  12. Сохраните изменения после завершения редактирования файла.

  13. Загрузите файл picasa.png в папку wp-content/themes/theme#####/images/icons/ на сервере. Новое изображение должно соответствовать по размеру исходным изображениям иконок социальных сетей в этой папке. В некоторых случаях дополнительные иконки уже находятся в папке wp-content/themes/theme#####/images/icons.

  14. В панели управления WordPress, перейдите во вкладку Внешний вид (Appearance) > Виджеты (Widgets) > Cherry — Social Networks. Внизу должен появиться новый раздел для добавления иконки Picasa, с двумя полями:

    wordpress_how_to_work_with_social_netwroks_3

Для того, чтобы изменить текст подсказок (tooltips), например facebook на myfacebook, пожалуйста, выполните следующее:

  1. Переименуйте файл facebook.png в папке wp-content/themes/theme#####/images/icons на myfacebook.png

  2. Откройте файл my-social-widget.php, который находится в папке wp-content/themes/theme#####/includes/widgets .

  3. Измените название в строке 15:

    	 $networks['Facebook']['link'] = $instance['facebook'];

    на:

    	 $networks['Myfacebook']['link'] = $instance['facebook'];

  4. А также, название в строке 48 на:

    	 <?php foreach(array("Myfacebook", "Twitter", "Flickr", "Feed", "Linkedin", "Delicious", "Youtube) as $network) : ?>

  5. Сохраните изменения и проверьте отображение подсказок (tooltip) на сайте.

Вы также можете воспользоваться детальным видео-туториалом:

WordPress. Как работать с виджетом социальных иконок (на основе Cherry Framework)

Шаблоны для Вордпресс
Эта запись была размещена в WordPress туториалы и помечена как Cherry, icons, manage, social, widget, WordPress, work. Добавьте в закладки постоянную ссылку.

Похожие записи

WordPress. Как создать пункт меню без ссылки (menu separator)
Февраль 7, 2020

Этот урок покажет как создать пункт меню без ссылки (menu separator) в Wordpress шаблоне.

50 Free WordPress Themes 2020
Январь 29, 2020

We have prepared for you a fantastic selection of 50 best themes, with which you can create a perfect site from scratch.

WordPress. Как изменить скорость прокрутки сайта
Январь 27, 2020

Из этого туториала Вы узнаете, как изменить скорость прокрутки сайта в Wordpress

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов