Домашня » WordPress » Оптимізація швидкості WordPress з користувальницькими іконами соціального обміну
Оптимізація швидкості WordPress з користувальницькими іконами соціального обміну
Це може здатися легким завданням, однак додавання добре налаштованих кнопок соціального обміну на сайт WordPress може бути неприємним. Коли я говорю про добре, я маю на увазі простий, легкий, ресурсозберігаючий, швидкий - більшість соціальних плагінів для обміну там не такий. Вони, як правило, їдять ресурси, як божевільні, і чому хтось бажає збільшити час завантаження плагіна на 25-35%, щоб відобразити деякі значки на своєму сайті?
Доброю новиною є те, що для виконання цього завдання вам не обов'язково потрібен плагін. У цьому підручнику я покажу вам, як ви можете легко додати власні кнопки спільного доступу до кінця повідомлень на вашому сайті WordPress всього кілька рядків коду.
Крок 1. Створення кнопок соціального спільного доступу
Ми будемо використовувати генератор кнопок Simple Sharing, зручний і простий у використанні веб-інструмент для створення піктограм спільного доступу. Головною перевагою цієї програми є те, що кнопки, які він створює, запускаються на інтерфейсі вони не обтяжуватимуть ваш сервер Ви також можете зберегти діяльність користувачів.
Щоб створити власні кнопки, перейдіть сюди та натисніть Почати. Виберіть 1 з 6 різних стилів кнопок. Натисніть далі та позначте пункт соціальні мережі потрібно додати на свій сайт. Коли ви закінчите, вам доведеться заповнити інформацію вашого сайту.
На цьому екрані (нижче) ви знайдете два варіанти: "Ні JavaScript" і "JavaScript". Відзначте JavaScript, оскільки це дозволить веб-переглядачу визначати URL-адресу динамічно, тому ваші відвідувачі зможуть розділити кожну публікацію окремо, а не лише URL-адресу домашньої сторінки.
Нарешті, подивіться на перегляд у прямому ефірі, завантажте вибраний набір іконок і захопіть створений вами код.
Крок 2: Створення теми дитини
Тепер вам доведеться додати створені піктограми та код на свій сайт. Перш за все потрібно створити дочірню тему.
Ви можете легко створити тему дитини WP за допомогою нашого підручника, або ви можете слідувати крокам цієї статті WP Codex. Якщо у вас вже є, ви можете перейти до кроку 3.
Дитяча тема стосується теми, яку ви зараз використовуєте - дещо подібним чином, як дитина стосується його батьків. Це успадковує все (стиль і функціональність) від батьківської теми але ви можете додати додаткову функціональність до неї.
У нашому випадку додаткові функціональні можливості будуть користувальницькими кнопками соціального обміну.
Крок 3: Створіть спеціальну функцію, яка відображає піктограми
Ми додамо спеціальну функцію до файлу functions.php дочірньої теми.
За допомогою цієї функції ви зможете додавати соціальні піктограми, де б ви не хотіли, на своєму сайті за допомогою спеціального гачка дій. Якщо дочірній темі ще немає файлу functions.php, створіть порожній текстовий файл у кореневій теці вашої дочірньої теми з функціями імені та змініть його розширення на .php.
Вставте наступний рядок коду в цей пустий файл:
Коли ви functions.php файл налаштовано, додайте до нього наступний фрагмент коду:
/ * * Додає користувальницькі значки спільного доступу * / function add_social_sharing () ?>
Поділитися публікацією
Нарешті видалити рядок коментаря HTML з фрагмента коду вище і замінити його на HTML код Ви створили на Кроці 1 Генератор кнопок соціального спільного доступу.
Крок 4. Скопіюйте відповідний файл шаблону до теки "Дитина"
За замовчуванням окремі повідомлення керуються назвою шаблону single.php. Іноді - особливо в більш сучасних темах - структура single.php є більш складним, оскільки він також завантажує додаткові файли шаблонів. На цьому кроці нам потрібно знайти відповідний файл шаблону, де можна додати піктограми пізніше.
Щоб знайти потрібне місце для соціальних кнопок, нам потрібно знайти файл шаблону містить функцію, яка завантажує вміст окремих повідомлень.
Давайте відкриємо редактор тем в панелі інструментів адміністратора WordPress у розділі Вигляд> Редактор. У верхньому правому куті ви знайдете випадаючий список, у якому ви можете вибрати батьківську тему. Під спадним списком ви можете побачити всі файли шаблонів, які містить батьківська тема. Прокрутіть вниз, поки не знайдете Шаблон одного повідомлення (називається single.php) і відкрийте його.
Якщо батьківська тема використовує get_template_part () Функція WP в single.php файл, що означає, що він використовує додатковий файл шаблону для завантаження вмісту окремого повідомлення.
Спочатку ви повинні з'ясувати, який з них. Ім'я додаткового файлу шаблону є першим параметром get_template_part () функції.
Першим параметром є "зміст" це означає, що ми шукаємо файл шаблону, званий content.php. Вам потрібно скопіювати цей файл з батьківської тематичної кореневої теки до дочірньої кореневої теки дитини, щоб змінити її.
Крок 5. Додайте гачок дій до файлу правих шаблонів
Ми створили функцію, яка називається add_social_sharing () на кроці 3, і ми прикріпили його до назві спеціального гачка дій custom_social_share. Тепер нам доведеться додати цей гачок до місця, де ми хочемо виконати функцію.
Ось фрагмент коду, який потрібно вставити в потрібне місце:
Далі знайдемо правильне місце.
Відкрийте файл шаблону, який ви додали до дочірньої теми на кроці 4, у редакторі коду або в редакторі тем адміністративної інформаційної панелі WordPress і шукайте контент() функції.
Перевірте, чи є wp_link_pages () функція відразу після контент() функції. Якщо є, то після цього фрагмент коду надходить; інакше слід контент() функції.
Крок 6: Додайте CSS-код до дитячої теми
Відкрийте вікно style.css файл вашої дочірньої теми або в редакторі коду, або в редакторі тем адміністративної інформаційної панелі WordPress, скопіюйте код CSS, створений у кроці 1, вставте його в кінець файлу і збережіть його.
Ми додамо два додаткові рядки до файлу CSS, щоб зробити іконки спільного доступу належним чином відображатися в кожній темі. Скопіюйте та вставте наступний фрагмент коду до кінця style.css файл:
ul.share-кнопки li a border: 0; ul.share-кнопки li img display: inline;
Крок 7: Завантажте набір піктограм соціальних медіа на сервер
Завантажте вибраний набір значків соціальних медіа, які ви завантажили на кроці 1, до папки дочірніх тем. Підключіть сервер через FTP, створіть нову папку зображення всередині кореневої папки вашої дочірньої теми (/ wp-content / themes / your-child-theme / images) і завантажте тут встановлену піктограму.
Назвімо папку зображення тому що це типова назва папки зображень, яку використовує генератор кнопок Simple Sharing.
Крок 8: Перевірте контур файлів піктограм
Після завантаження піктограм соціальних медіа на сервер на кроці 7 важливо перевірити шлях файлів іконок, щоб переконатися, що вони будуть завантажені.
Шлях файлу зображення дає підказку браузеру про його розташування на сервері. Давайте перевіримо шляхи зображення всередині functions.php файл дочірньої теми. Відкрийте файл у редакторі коду та перейдіть до add_social_sharing () функція, де потрібно перевірити код HTML, який ви генерували за допомогою генератора кнопок Simple Sharing.
У HTML коді ви знайдете з тегом src для кожного значка. Перевірте, чи кожен src атрибути вказують на точне місце, де завантажено набір піктограм на кроці 7.
Генератор кнопок Simple Sharing додає відносні шляхи до файлів. Іноді браузери не можуть відображати зображення, якщо ви використовуєте відносний шлях, так що це гарна ідея замість цього використовуйте абсолютні шляхи. Таким чином, кожен веб-переглядач, який потенційно використовується вашими відвідувачами, може бути впевнений у розташуванні необхідних файлів піктограм.
Відносний шлях зображення, доданий генератором, виглядає приблизно так:
Давайте змінимо src атрибут кожної піктограми до абсолютного шляху, що означає, що він буде включати повну URL-адресу файлу.
Шлях URL-адреси вище буде виглядати так:
Крок 9. Завантажте змінені файли та активуйте тему "Дитина"
Підключіть сервер через FTP і завантажте всі файли, які ми створили в цьому підручнику, який ви ще не завантажили: functions.php, style.css, і відповідний файл шаблону (у цьому підручнику або single.php або content.php).
Нарешті, активуйте дочірню тему в панелі інструментів WP admin в розділі Вигляд> Теми меню.
Тепер ви готові зі своїми супер-легкими, ресурсозберігаючими, налаштованими піктограмами спільного доступу. Ви можете перейти в Інтернет і перевірити його в прямому ефірі на своєму сайті.
Висновок
У цьому підручнику я показав вам, як додати спеціальні кнопки спільного доступу до кінця окремих повідомлень. Можна додати піктограми спільного доступу до будь-яких інших місць на вашому веб-сайті за допомогою створеного нами гачка дій.
Просто додайте код, який ми використовували на кроці 5, на місце, де потрібно відображати кнопки:
Вам також доведеться знайти правильний файл шаблону, якщо ви хочете розмістити іконки в іншому місці. Однією сторінкою керує файл шаблону, який викликається page.php, під час завантаження медіа вкладень, наприклад, зображень attachment.php.
Якщо ви бажаєте відображати кнопки спільного доступу на іншому місці на вашому веб-сайті, можна знайти ієрархію шаблонів WordPress, щоб знайти її.
