Начална » WordPress » Оптимизация на скоростта на WordPress с потребителски икони за социално споделяне
Оптимизация на скоростта на WordPress с потребителски икони за социално споделяне
Тя може да изглежда лесна задача, но добавянето на добре поведени социални бутони за споделяне към сайт на WordPress може да бъде неудобство. Когато казвам добро поведение, имам предвид прост, лек, лесен за използване ресурс, бърз - повечето социални плъгини за споделяне там не са такива. Те са склонни да консумират ресурси като луди и защо някой би искал да увеличи времето за зареждане на плъгина с 25-35%, само за да покаже някои икони на техния сайт?
Добрата новина е, че не е необходимо да имате плъгин, за да изпълните тази задача. В този урок ще ви покажа как можете лесно добавяне на персонализирани бутони за споделяне на обществото до края на публикациите с вашия WordPress сайт само няколко реда код.
Стъпка 1: Създайте бутоните за социално споделяне
Ще използваме генератора на бутони за просто споделяне, удобен и лесен за използване уеб инструмент за генериране на икони за споделяне. Основното предимство на това приложение е, че бутоните, които генерира, се изпълняват на интерфейса те няма да натоварят сървъра ви и можете също да запазите дейностите на потребителите си частни.
За да генерирате персонализирани бутони, отидете тук и натиснете започвам. Изберете 1 от 6 различни стила на бутоните. Кликнете следващия и отбележете социални мрежи искате да добавите към сайта си. Когато приключите, ще трябва да попълните информацията за уебсайта си.
На този екран (по-долу) ще намерите две опции: „Без JavaScript“ и "JavaScript". отметка JavaScript, тъй като това ще позволи на браузъра да открива динамично URL адреса, затова посетителите ще могат да споделят всяка публикация поотделно, а не само URL адреса на началната страница.
Накрая погледнете визуализацията на живо, изтеглете избрания набор от икони и вземете генерирания код.
Стъпка 2: Създаване на детска тема
Сега ще трябва да добавите генерираните икони и код към сайта си. На първо място ще трябва да създадете детска тема.
Лесно можете да създадете WP дете тема с помощта на нашия урок, или можете да следвате стъпките на тази статия WP Codex. Ако вече имате такъв, можете да преминете към стъпка 3.
Темата за детето е свързана с темата, която използвате в момента - по подобен начин, както детето се отнася до родителите му. То наследява всичко (стил и функционалност) от родителската тема но ти можеш добавете допълнителна функционалност към него.
В нашия случай допълнителната функционалност ще бъде потребителските бутони за социално споделяне.
Стъпка 3: Създайте персонализирана функция, която показва иконите
Ще добавим персонализирана функция към файла с функции.php на дъщерната тема.
С помощта на тази функция ще можете да добавяте социалните икони, където пожелаете, на сайта си, като използвате кукичка за действие. Ако детето ви все още няма файл functions.php, създайте празен текстов файл в основната папка на дъщерната си тема с функциите за име и променете разширението му на .php.
Вмъкнете следния ред от кода в този празен файл:
Когато твоят functions.php файлът е настроен, добавете към него следния кодов фрагмент:
/ * * Добавя потребителски икони за социално споделяне * / функция 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) и качвайте тук иконата.
Наричаме папката снимки защото това е името по подразбиране на папката с изображения, която използва генераторът на бутони за просто споделяне.
Стъпка 8: Проверете пътя на файловете с икони
След като качите иконите на социалните медии на сървъра си в Стъпка 7, важно е да проверите пътя на файловете с икони, за да се уверите, че те ще бъдат заредени..
Пътят на файл с изображение дава съвет на браузъра за местоположението му на сървъра. Нека да проверим пътеките на изображението вътре в functions.php файл на детето. Отворете файла в редактора на код и отидете до add_social_sharing () функция, където трябва да проверите HTML кода, който сте генерирали с генератор на бутони за просто споделяне.
В HTML кода ще намерите с маркер SRC атрибут за всяка икона. Проверете дали всеки SRC атрибутите сочат към точното местоположение, където е зададен набор от икони в Стъпка 7.
Генераторът на бутони за просто споделяне добавя относителни пътища към файлове. Понякога браузърите не могат да визуализират изображенията, ако използвате относителна пътека, така че е добра идея вместо това използвайте абсолютни пътеки. По този начин всеки браузър, който потенциално се използва от посетителите ви, може да е сигурен за местоположението на необходимите файлове с икони.
Относителният път на изображението, добавен от генератора, изглежда така:
Нека променим SRC атрибут на всяка икона по абсолютен път, което означава, че ще включва пълния URL адрес на файла.
Пътят по-горе ще изглежда по следния начин:
Стъпка 9: Качете модифицираните файлове и активирайте Theme Theme
Свържете сървъра си с FTP и качете всички файлове, които създадохме в този урок, който още не сте качили: functions.php, на style.css, и съответния шаблон на шаблона (в този урок или на single.php или content.php).
Накрая активирайте темата на детето в таблото за управление на WP администратора под Външен вид> Теми меню.
Сега вече сте готови с супер-леките и персонализирани икони за споделяне, които пестят ресурси. Можете да отидете онлайн и да го проверите на живо в сайта си.
заключение
В този урок ви показах как да добавите потребителските бутони за споделяне на социални контакти в края на отделните публикации. Можете да добавите иконите за споделяне към други местоположения на уебсайта си с помощта на създадената от нас кука за действия.
Просто добавете кода, който използвахме в Стъпка 5, на мястото, където искате да се показват бутоните:
Вие също ще трябва да намерите правилния шаблон на шаблона, ако искате да поставите иконите някъде другаде. Единични страници се управляват от шаблон, наречен шаблон page.php, докато медийни прикачени файлове като изображения се зареждат от attachment.php.
Ако искате да показвате бутоните за споделяне на социални контакти на друго място на уебсайта си, можете да използвате Йерархията на шаблоните на WordPress, за да го намерите..
