WordPress сглобява множество PHP шаблонни файлове, за да направи четливо съдържание на потребителя в браузъра.Темите на WordPress съдържат файлове header.php, footer.php, single.php (за публикации), page.php (за страници) и sidebar.php, като най-новите теми използват допълнителни секции за шаблони за генериране на основното съдържание.
Всички тези шаблони са спретнато сглобени и показани, когато преглеждате страницата на WordPress във вашия браузър.Обикновено не е необходимо да променяте тези файлове и има налични плъгини за вмъкване на персонализирана функционалност.Въпреки това, в някои случаи трябва да вмъкнете код в заглавната и долната част на WordPress.
В тази статия ще обясним как да го направите без и с плъгини.
Защо да вмъкнете код в горния или долния колонтитул?
Секциите за горен и долен колонтитул са удобни за различни интеграции на код и добавяне на допълнителна функционалност към вашия сайт.Ето някои от най-добрите примери, които изискват да вмъкнете код в горния и долния колонтитул на вашия WordPress сайт.
Вмъкнете код за автоматична реклама от Google AdSense или рекламен код за наддаване на главната страница от всяка друга рекламна програма.
Инсталирайте проследяващия код на Google Analytics и Facebook Pixel.
Вмъкнете captcha от Bing Webmaster Tools, Google Search Console, Baidu, Yandex и всяка друга платформа като Pinterest.
Добавете персонализиран CSS към заглавката, като стилови таблици на Google Fonts и JavaScript в долния колонтитул.
Вмъкнете персонализирани компоненти като breadcrumbs в заглавката, когато използвате плъгини като Yoast SEO.
Както можете да видите, списъкът ще бъде по-дълъг в зависимост от вашите нужди.
Добавете код към секциите за горен и долен колонтитул в WordPress
По подразбиране WordPress не предоставя никаква опция за вмъкване на код в секции за горен и долен колонтитул.Лесният вариант е да редактирате файла директно и да вмъкнете кода си.За тази цел обаче има и плъгини.В тази статия ще обясним два начина за добавяне на код към заглавната и долната част на всеки сайт на WordPress.
Редактирайте ръчно файловете header.php и footer.php на темата на WordPress.
Използвайте приставката Вмъкване на горен и долен колонтитул, за да добавите код без редактиране на файл.
Освен това ще обясним използването на някои теми за вмъкване на код в заглавки и долни колонтитули, използвайки куките wp_head и wp_footer.
Ръчно вмъкване на код за горен и долен колонтитул на WordPress
Тази опция изисква редактиране на файла header.php или footer.php в темата на вашия WordPress сайт и може да не е удобна за начинаещи.
Първо, започнете с подготовка на кодови фрагменти или копиране от сайтове на трети страни.След като сте готови кода на горния и долния колонтитул, задръжте курсора на мишката върху менюто Външен вид в таблото за управление на сайта и щракнете върху раздела Редактор на теми.
Игнорирайте всички предупредителни съобщения, които получавате, и изберете активната си тема от падащия списък „Избор на тема за редактиране:“.
Изберете файла "header.php" или "footer.php" вдясно от текущия изглед.
За горната част не забравяйте да поставите кода под затварящия маркер "", след което кодът за долния колонтитул трябва да бъде под "„Етикет.Понякога може да се наложи да вмъкнете код преди затварящия маркер.
Накрая щракнете върху бутона „Актуализиране на файла“, за да запазите промените във вашия сайт с добавения фрагмент.
Уверете се, че сте тествали сайта си и проверете дали функциите, които сте включили, работят според очакванията.
Вмъкнете код за горен и долен колонтитул на WordPress с помощта на плъгини
По подразбиране WordPress ви позволява да добавяте персонализиран CSS към вашия уебсайт в секцията Външен вид > Персонализиране > Допълнителен CSS.Въпреки това, не можете да вмъкнете JavaScript в този раздел.Има много безплатни плъгини и плъгини, достъпни за вмъкване на код, тук ще обясним с помощта на „WPBeginner Вмъкване на горен и долен колонтитул“.Плъгинът има супер прост интерфейс, който начинаещите могат лесно да използват.
Първо инсталирайте и активирайте плъгина „Вмъкване на горен и долен колонтитул“.От таблото за управление на вашия WordPress сайт задръжте курсора на мишката върху менюто Plugins и щракнете върху Добавяне на ново.
Използвайте функцията за приставка за търсене, за да намерите „Вмъкване на горен и долен колонтитул“ и щракнете върху бутона „Инсталиране сега“.След като инсталационният процес приключи, "Активирайте" приставката.
Инсталирайте плъгина
Отидете в менюто Настройки, намерете и щракнете върху подменюто Вмъкване на горен и долен колонтитул.
Плъгинът предоставя три полета за поставяне на скриптове в заглавката, тялото и долния колонтитул за вмъкване на код.Дотогава доставчици на трети страни като Google Analytics ви инструктират в коя кутия да поставите техните фрагменти.В противен случай се уверете, че знаете точно къде искате да вмъкнете кода.
Поставете тези кодове в съответните кодове и щракнете върху Запазване, за да завършите промените в сайта си.
Кодовите скриптове вече автоматично се зареждат на конкретното място, където работи сайтът.
Винаги можете да редактирате допълнително кода и да запазите приставката активна, тъй като нейното деактивиране ще предотврати добавянето на персонализирана функционалност и ще деактивира всички скриптове, добавени преди това към вашия сайт.
Вмъкнете код с помощта на плъгини
Имайте предвид, че ако случайно плъгинът „Вмъкване на горен и долен колонтитул“ бъде деактивиран или деинсталиран по погрешка, кодът ви ще остане в базата данни на вашия сайт.Просто преинсталирайте или активирайте повторно приставката, за да накарате по-ранния код да работи.Също така се препоръчва да изчистите кеша на вашия WordPress сайт, когато добавяте и запазвате промени в кодовите фрагменти на горния и долния колонтитул в приставката.
Редактирайте горни и долни колонтитули с теми
Независимо дали редактирате вашите файлове с теми ръчно или използвате плъгин, кодът, който вмъквате, засяга целия ви уебсайт.Трябва да използвате плъгини като Insert HTML Snippets или да опитате персонализирани HTML блокове в редактора Gutenberg, за да вмъкнете персонализиран код само в конкретни публикации или страници.Можете обаче да вмъквате код в горни и долни колонтитули с най-новите теми като GeneratePress Premium и Astra Pro.Тези теми използват стандартните куки wp_head и wp_footer и позволяват прилагането на персонализирани ограничения.Например, можете просто да вмъкнете галета в една публикация, без да засягате страницата.
Тук ще използваме темата Astra Pro за инструкции, можете да извършите подобни стъпки в темата GeneratePress Premium, като използвате опцията „Елементи“.
След като инсталирате добавката Astra Pro, отидете на Външен вид > Опции за Astra.
Активирайте опцията Персонализирано оформление и щракнете върху връзката Настройки за тази опция.
Щракнете върху бутона „Добавяне на ново“ и поставете кода, който искате да вмъкнете в полето.
В секцията Настройки на персонализирано оформление щракнете върху падащото меню Оформление и изберете опцията Куки.
Вмъкнете заглавния код в темата на Astra
В падащия списък Действие изберете wp_head за секцията с горен колонтитул и wp_footer за секцията с долния колонтитул.
Ако използвате само един фрагмент, оставете „priority“ празно.Въпреки това, когато вмъквате няколко кода на едно и също място на куката, не забравяйте да зададете приоритетния ред за вмъкване на кодовете.Можете да използвате 10, 20, 30 и т.н. като приоритет, най-ниският ще има предимство пред останалите.
Предоставете подробности за горното и долното разстояние в пиксели, ако е необходимо.
Изберете къде искате да покажете кода в падащото меню Display On.Можете да изберете конкретни публикации, страници, категории или да вмъкнете целия си уебсайт или да вмъкнете конкретни типове публикации като публикации, страници или всеки персонализиран тип публикации, използван във вашия уебсайт.
В падащия списък User Role изберете потребителската роля, за която искате кодът да бъде активен.
След като всички настройки са завършени, щракнете върху бутона Публикуване, за да влязат в сила промените ви.
Причини за използване на приставката за вмъкване на горен и долен колонтитул
Има толкова много недостатъци при редактирането на файлове с теми или използването на персонализирана тема, че ще се придържате към подхода на плъгините.Ето някои от предимствата, които можете да получите от използването на плъгина, с изключение на това, че може да не сте техничар или може да сте начинаещ.
Тъй като магазинът за плъгини добавя скриптове на отделно място, не е нужно да се притеснявате за изтриване на код по време на надстройки, актуализации или смяна на теми.Освен това нямате нужда от дъщерни теми, тъй като приставката работи независимо от темата на вашия сайт.
Това прави добавянето на персонализиран код в горните и долните колонтитули лесно и бързо.Освен това, това помага да се поддържа организацията на кодови фрагменти на едно място.
Възможно е да срещнете грешки, когато избирате да редактирате вашата тема на WordPress, така че използването на плъгин може да помогне за размахване, предотвратяване и избягване на такива грешки.
последни мисли
В много случаи трябва да промените външния вид, да промените начина или да добавите друга функционалност към вашия WordPress сайт.И в двата случая, когато не сте технически склонни, не забравяйте да използвате метода на приставката, за да вмъкнете кода на горния и долния колонтитул.Въпреки че теми като Astra и GeneratePress могат да ви помогнат с това, ще трябва да закупите премиум версията.Също така, това може да затрудни смяната на теми, в който момент ще трябва да потърсите плъгини, които да използвате.
