- вступ
- Помістити на сайті іконки кнопок соціальних мереж
- Правильний код для кнопок «Поділися»
- Код Кнопки «Поділися» для Facebook
- Розмістити коди кнопок в шаблоні блогу WP
- Зробити таблицю для кнопок в CSS
- Написані коди чотирьох кнопок «Поділися» помістимо в шаблоні блогу WordPress
вступ
Важливо! Будь-які роботи, по редагуванню і зміни основного коду файлів вашого шаблону, необхідно починати при наявність резервної копії сайту . Вона потрібна для відновлення сайту в разі фатальних помилок при редагуванні.
- Розмістити на сайті іконки кнопок соціальних мереж;
- Написати правильний код для кнопок «Поділися»;
- Розмістити коди кнопок в шаблоні блогу WP.
Розберемо докладно кожен крок.
Помістити на сайті іконки кнопок соціальних мереж
Знайдіть в інтернет іконки соціальних мереж, які нам потрібні для кнопок (facebook, twitter, vkontakte, livejournal). Для пошуку можу порекомендувати два безкоштовних архіву іконок.
- www.iconarchive.com
- findicons.com
Вибрані іконки приведіть до одного розміру і завантажте в бібліотеку медіафайлів свого блогу. Для цього увійдіть в адміністративній панелі блогу. Далі відкриваємо Консоль >>> Медіафайли >>> Бібліотека >>> Додати новий.
Після додавання іконок, знадобляться їх URL адреси в бібліотекe медіафайлів. Для цього натисніть «Змінити» і справа скопіюйте URL адреса іконки. Також не завадить запам'ятати їх розмір.
Ітаці ми отримали чотири потрібні нам іконки, розміщені в бібліотеці медіафайлів вашого блогу і їх URL адреси.
Зауваження: Замість бібліотеки медіафайлів свого блогу можна скористатися будь-яким доступним сховищем фотографій. Наприклад, Flickr.Нужни повні адреси іконок з http.Но використання картинок зі сторонніх сайтів, негативно впливають на швидкість завантаження вашого сайта.Так що, раджу використовувати медіа бібліотеку свого сайту.
Переходимо до коду кнопок «Поділися»
Правильний код для кнопок «Поділися»
Перед прикладом кодів кнопок, хочу звернути вашу увагу на один елемент коду.
Це шлях до іконки. У наведених нижче прикладах як шлях до іконки соц.служб потрібно вставляти повну адресу до завантаженої іконки в бібліотеці медіафайлів.
У прикладах буде використаний умовний адреса для фото мого сайту:
//www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..pngЯк його дізнатися дивіться в першому параграфі статті. Далі наведу окремо коди всіх кнопок «Поділися» для соціальних мереж, про які пишу в цій статті.
Коду укладені до теги <noindex> і <nofollow> для блокування передачі вагомості сторінок сайту.
Код Кнопки «Поділися» для Facebook
<Noindex> <a rel="nofollow" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?> ',' facebook ',' width = 1000, height = 1024 '); return false; " href = "http://www.facebook.com/sharer.php?u=<?php the_permalink ();?>" title = "Поділитися в Facebook"> <img src = "// www.wordpress-abc. ru / wp-content / uploads / 2013/03 / Соц..png "width =" 64 "height =" 64 "alt =" Поділитися в Facebook "/> </a> </ noindex>Код Кнопки «Поділися» для Twitter
<Noindex> <a rel="nofollow" rel="nofollow" onclick="window.open('http://twitter.com/home?status=Чітаю <?php the_permalink(); ?>: <? Php the_title ();?> ',' twitter ',' width = 1000, height = 1024 '); return false; " href = "http://twitter.com/home?status=Читаю <? php the_permalink ();?>: <? php the_title ();?>" title = "Додати в Twitter"> <img src = "/ /www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png "width =" 64 "height =" 64 "alt =" Додати в Twitter "/> </a> </ noindex >Код Кнопки «Поділися» для В Контакте
<Noindex> <a rel="nofollow" onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?> ',' vkontakte ',' width = 626, height = 436 '); return false; " href = "http://vkontakte.ru/share.php?url=<?php the_permalink ();?>" title = "Поділитися ВКонтакте"> <img src = "// www.wordpress-abc.ru/wp -content / uploads / 2013/03 / Соц..png "width =" 64 "height =" 64 "alt =" Поділитися ВКонтакте "/> </a> </ noindex>Код Кнопки «Поділися» для Live Journal (ЖЖ)
<Noindex> <a rel="nofollow" onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?> & amp; subject = <? Php the_title ();?> ',' lj ',' width = 1000, height = 1024 '); return false; " href = "http://www.livejournal.com/update.bml?event=<?php the_permalink ();?> & amp; subject = <? php the_title ();?>" title = "Опублікувати в своєму блозі livejournal .com "> <img src =" // www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png "width =" 64 "height =" 64 "alt =" Опублікувати в Livejournal "/> </a> </ noindex>Докладний розбір коду для кнопки поділися
У представлених кодах ви повинні поміняти, шлях до завантажених іконок і властивості їх розмірів:
<Img src = "// www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png»width=»64" height = "64" alt = "Опублікувати в ... ..»
Також можете поміняти зміст тега alt і title. Врахуйте: Текст після Тегу title буде видно, при наведенні миші на іконку.
Розмістити коди кнопок в шаблоні блогу WP
Помістити кнопки в таблицю
Щоб помістити кнопки, розміщені в один рядок, потрібно помістити їх в таблицю. Це не сучасний, але дуже простий варіант розмістити іконки в один рядок.
<Table> <tbody> <tr> <td> Код кнопкі1 </ td> <td> Код кнопкі2 </ td> <td> Код кнопкі3 </ td> <td> Код кнопкі4 </ td> </ tr> < / tbody> </ table>Зробити таблицю для кнопок в CSS
Більш сучасний варіант, розмістити іконки в один рядок прописати в файлі: style.css наступний клас:
.icons img {float: left; width: 100px; margin: 0 5px 0 0; border: 0; }де [widgth] і [margin] величини переменние.Определяют ширину таблиці і відступу в рамці відповідно. Попередньо, потрібно зробити наступне:
- Для такого варіанту, все іконки кнопок потрібно розмістити в одній папці, наприклад icons;
- Всі коди кнопок потрібно обернути тегами
- Всі шляхи до іконок замінити на:
І тільки після цього, розмістити клас .icons img (дивись трохи вище) в style.css. Але це тема окремої статті.
Написані коди чотирьох кнопок «Поділися» помістимо в шаблоні блогу WordPress
Зроблені коди для соціальних кнопок, потрібно розмістити в шаблоні сайту WP.
Для цього в адміністративній панелі входимо в
Консоль >>> Зовнішній вигляд >>> Редактор
Для розміщення коду в окремих відкритих статтях, потрібен файл шаблону виводить записи. single.php) або loop-single.php або content.php. Щоб кнопки з'явилися після статті, вставляємо їх коди після тега:
<? Php the_content (); ?>
Для розміщення вгорі статті, вставляємо коди до цього ж тега. Не забуваємо зберегтися і перевірити результат.
www.wordpress-abc.ru.
Інші статті розділу «WordPress без плагіна»
Статті пов'язані з теми:
Open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?Php?
U=<?
Php the_permalink ();?
Open('http://twitter.com/home?status=Чітаю <?php the_permalink(); ?
Gt;: <?
Php the_title ();?
Com/home?
Status=Читаю <?
Php the_permalink ();?
