Как да създадете WordPress плъгин: стъпка по стъпка

Искате да създадете a WordPress плъгин ? Този урок ще ви научи как да го направите.

Приставките допринасят за популярността на WordPress, защото позволяват на потребители без познания по кодиране да създават невероятни уебсайтове.

Има над 50 000 добавки в rWordPress директория  предназначени за различни цели. Ще намерите WordPress плъгини за абонамент за бюлетина , сигурност et  е-търговия . Просто го назовете.

Без тях уебсайтът на WordPress е просто колекция от статични изображения и блокове текст. С плъгини системата за управление на съдържанието може да постигне невероятно ниво на персонализиране.

Независимо дали имате нужда от персонализиран плъгин за вашия уебсайт или искате да създадете WordPress плъгин и го монетизирайте, да тръгваме.

Съдържание

Въпроси fréquemment posées

Какво ви е необходимо, за да създадете приставка за WordPress

За да създадете плъгин, не е необходимо да сте експерт в WordPress разработчик. Трябват ви само някои основни познания по кодиране, за да започнете.

• Основни познания по програмиране на PHP: Приставките за WordPress са написани на PHP, така че трябва да разберете езика и неговия синтаксис, преди да започнете.
• Основен HTML и CSS:  HTML и CSS ви позволяват да контролирате показването и външния вид на вашите добавки. Ето защо е изключително важно да разберете техните основи, за да създадете плъгин за WordPress.
• Познаване на WordPress:  е полезно да се запознаете с платформата WordPress и нейните основни функции, както и с WordPress Codex (онлайн ръководството за разработка на WordPress).
• Среда за разработка: За да разработите и тествате вашия плъгин, трябва да инсталирате WordPress на вашата локална машина или на сайт за разработка. Това ще ви позволи да тествате вашия плъгин, без да засягате активен уебсайт. Ще ви покажем как да направите това в следващия раздел.
• Текстов редактор: Ще ви е необходим текстов редактор, за да напишете кода на приставката. Налични са много опции, като Sвъзвишен текст, Атом et Кода на Visual Studio.

Как да създадете WordPress плъгин в 7 стъпки

Стъпка 1: Разберете как работят добавките за WordPress

Тъй като WordPress е написан на език за програмиране, всеки с познания по кодиране може да получи достъп и да модифицира кода на WordPress.

Точно така работят плъгините. Те ви позволяват да променяте и разширявате функционалността на WordPress чрез директно взаимодействие с вашия WordPress с помощта на определени PHP функции.

Създаването на вашия WordPress плъгин и добавянето на код ще направи нещо само ако извикате PHP функцията с помощта на кука. Куките са това, което позволява на вашия плъгин да взаимодейства с WordPress, без да се налага да редактирате основните файлове.

Нека да разгледаме връзката между квадратните скоби и функциите, за да разберем основите на WordPress плъгините.

Функции на WordPress:

Кодът на WordPress е изграден върху функции, които позволяват на всеки код на трета страна да взаимодейства с WordPress. Ето защо ще намерите много функции в плъгини и теми. Всяка функция има свое име, последвано от скоби и кода вътре в тях.

Ето един пример:

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Можете да извикате тази функция директно във вашия WordPress плъгин, като напишете sticky_header() там, където искате кодът да се изпълнява. Но това е лоша практика, защото може да срещнете проблеми. Ето още две причини, поради които не трябва да извиквате функции директно във вашия код.

Първо, директното повикване работи само за основни функции, като добавяне на съдържание към файл с тема. Освен това, използвайки този подход, ще трябва да извиквате функции многократно, за да ги използвате на множество места, което отнема време и е тромаво в кодовите файлове.

Ръчното извикване на функция също може да бъде трудно, ако сте нов в кодирането. Когато създавате добавки, най-добрата практика е да ги прикрепите към кука. Това ще ви спести необходимостта да извиквате функцията на много места.

WordPress куки 

Куката е специфична точка в кода на WordPress, където можете да изпълнявате свои собствени персонализирани функции. Има два вида куки: екшън куки и филтърни куки.

Куки за действие

Куките за действие ви позволяват да изпълнявате персонализирани функции в определено време в цикъла на изпълнение на WordPress. Ето как изглежда синтаксисът на кука за действие.

add_action('hook_name', 'my_custom_function');

Le  име_на_кука  е името на куката за действие, която искате да използвате.

В WordPress има няколко куки за действие. Можете да ги намерите в codex WordPress.

моята_персонализирана_функция  е функцията, която съдържа кода, който искате да изпълните. Тази функция трябва да бъде дефинирана преди функцията ADD_ACTION.

Синтаксисът ще изглежда така, за да прикрепите функцията за лепкава заглавка по-горе към кука.

add_action( 'wp_footer', 'sticky_header' );

Тази функция изпълнява функцията sticky_header(), когато се извика куката за действие wp_footer. Можете също да прикачите функцията към конкретна кука, като замените wp_footer с името на кука по ваш избор.

Например:

add_action( 'init', 'sticky_header' );

Това ще стартира функцията за лепкав хедър, когато се извика действието за стартиране на WordPress.

Филтърни куки

Кукичките за филтриране ви позволяват да променяте данни, преди да бъдат показани или записани в базата данни. Ето пример за филтърна кука, която променя заглавието на блог публикация само с главни букви.

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

Тази функция приема един аргумент, $title, който е оригиналното заглавие на публикацията в блога.

След това функцията използва функцията strtoupper() за преобразуване на заглавието в главни букви и връща променената стойност.

Разликата между Action и Filter Hooks

Куките за действие ви позволяват да изпълнявате персонализирани функции в определено време в цикъла на изпълнение на WordPress. В горния пример куката за действие wp_footer се извиква точно преди етикета.

Кукичките за филтриране, от друга страна, ви позволяват да променяте данните, докато се предават през кодовата база на WordPress.

Както в примера по-горе, филтърната кука заглавието ви позволява да редактирате заглавието на публикация в блог, преди тя да бъде показана на уебсайта.

Стъпка 2: Настройте тестова среда

Втората стъпка в създаването на WordPress плъгин е да настроите среда за тестване или разработка. Целта е да се избегне експериментирането на реален сайт.

Създаването на плъгин понякога изисква напред и назад. Можете също така да направите грешки, които ще повредят уебсайта ви.

Можете да използвате компютъра си като локален сървър за хостване на тестов сайт на WordPress, където можете да създадете и тествате вашия плъгин.

Ако вашият планнастаняване поддържа създаване на тестов сайт, можете също да го използвате. Тук ще използваме първото решение.

За да настроим тестова среда, ще го направим изтегляне локално , инструмент за разработка за локално хостване на уебсайтове на WordPress.

След като изтеглянето приключи, стартирайте софтуера на вашия компютър и щракнете + икона долу вляво, за да създадете нов локален сайт.

Избирам от Създайте нов сайт и щракнете върху бутона Продължете.

След това следвайте инструкциите на екрана, за да добавите името на вашия сайт, да настроите средата и да създадете данни за вход в WordPress.

След като сте готови. Кликнете върху бутона Добавяне на сайт. След като добавите вашия сайт, изберете уебсайта си в локалното табло за управление и стартирайте вашето табло за управление на WordPress за администратори.

След като се отвори страницата за вход на администратора, използвайте потребителско име et Le Парола за WordPress който създадохте по-горе за достъп до вашето табло за управление.

Готово е. Вашата тестова среда е готова. Нека започнем да създаваме вашия WordPress плъгин.

Стъпка 3: Създайте вашата папка с добавки

След като вашата тестова среда е на място, първото нещо, което трябва да направите, е да създадете файл с плъгини в директорията на вашия сайт. По подразбиране WordPress съхранява всички добавки в директорията wp-content/plugin.

Всеки плъгин, инсталиран на сайт на WordPress, ще има папка в тази директория. Следователно за вашия плъгин ще трябва да създадете папка в тази директория и да й дадете име.

За този урок ще отидем до папката wp-content/plugin в нашата локална директория на сайтове. Ето как.

Забележка:  Процесът е същият, ако използвате посреднически сайт.

На вашето локално табло щракнете върху  Отидете на папката на сайта . Ще бъдете пренасочени към местната директория на сайта.

Изберете приложения в опциите щракнете върху обществен след това WP-съдържание. Ще видите различни папки в тази директория.

Отворете папката Plugins и нова подпапка с името на вашия плъгин. Ние ще използваме тук Залепваща глава тъй като това е името на плъгина, който искаме да създадем.

Стъпка 4: Създайте основния PHP файл за вашия плъгин

След като създадете вашата папка с плъгини, следващата стъпка е да добавите PHP файл към тази папка. Това е мястото, където ще бъдат налични кодовете и функционалността на вашия плъгин.

За този урок се нуждаем само от един PHP файл за прост плъгин, който създава лепкава заглавка в WordPress.

За по-сложни добавки с разширена функционалност може да има различни типове файлове в папката на добавките, като CSS и javascript. В нашия случай един PHP файл ще бъде достатъчен.

За да направите това, създайте PHP файл в папката на приставката, както е на екранната снимка по-долу.

След като файлът е готов, е време да добавите малко информация към вашия плъгин.

Стъпка 5: Конфигурирайте информацията за вашия плъгин

Известна също като заглавка на файла на плъгина, информацията за вашия плъгин е PHP коментарен блок, който включва подробности за вашия плъгин, като име на плъгина, версия, URL, име на автор и неговия уебсайт, лиценз и др.

Това е информацията, която виждате на страницата на приставката за WordPress, след като инсталирате приставка.

Можете да намерите заглавка на плъгин файл в WordPress codex . Изглежда така.

Просто копирайте и поставете този код в PHP файла на вашия плъгин, след което редактирайте подробностите, за да отговарят на вашия плъгин. В нашия случай четецът на файлове с приставка за лепкав заглавен файл ще изглежда така.

<?php

/*

Plugin Name: Sticky Header

Plugin URI: https://wordpress.org/plugins/sticky-header/

Description: Make your website header sticks to the top of every page on your website as users scroll.

Author: The Team

Author URI: https://blogpascher.com/sticky-header

Text Domain: Sticky Header 

Domain Path: /languages

*/

След като запазите този файл, вие сте създали нов плъгин и можете да го намерите в списъка с вече инсталирани плъгини на вашия сайт.

Влезте в таблото за управление на вашия тестов сайт в WordPress и отидете на Plugins>Plugins installés.

Ще видите приставката Sticky Header с подробности. Ето го.

Вече можете да активирате приставката, но тя няма да направи нищо, защото все още не сме добавили никаква функционалност към нея. Така че нека накараме нашия плъгин да направи нещо.

Стъпка 6: Добавете код към вашия плъгин

За да направим това, ще добавим лепкавия хедър код, който използвахме при изучаването на функциите и куките на WordPress по-горе. Ето как.

Отворете PHP файла на вашия плъгин. Под подробностите за заглавката копирайте и поставете тези кодови фрагменти в основния PHP файл на вашия плъгин и го запазете.

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Този код прави две основни неща,

функцията sticky_header се активира, когато потребителят превърти страницата и спира, когато превъртането спре.

Второ, действието add_action('wp_footer', 'sticky_header'); използвай адреса....

Запазете кода и това е всичко. Успешно създадохте приставка за WordPress, която прави заглавката на уебсайта ви лепкава, когато потребителите го превъртат.

Стъпка 7: Активирайте приставката

Върнете се на вашия сайт и активирайте приставката.

Когато превъртате през версията на живо на сайта, заглавката на вашия сайт ще остане в горната част на страницата.

След като видите ефекта от новия плъгин на вашия демо сайт, е време да го изпробвате на вашия реален сайт.

Преди това се уверете, че сте тествали плъгина за грешки и уязвимости. Разрешете ги, ако е приложимо. Като предпазна мярка, архивирайте вашия WordPress сайт преди да внедрите новия си плъгин.

Ако сте доволни от представянето на плъгина на вашия сайт, можете да качите своя плъгин в хранилището на плъгини на WordPress. Тъй като собствениците на уебсайтове го използват безплатно, ще получите обратна връзка за това какво да подобрите и как да го направите.

И ако искате да печелите пари с вашия плъгин, можете да го продадете на един от уебсайтовете, които изброихме по-горе

Заключение

Ако сте стигнали дотук, ще се съгласите, че създаването на приставка за WordPress е относително лесно. Като следвате инструкциите в това ръководство, ще можете да създадете основен плъгин за WordPress. Можете да експериментирате с колкото искате функции и да подобрите функционалността на вашия плъгин.

Създаването на сложни добавки следва същия метод. Повече функционалност означава повече функции във вашия плъгин файл.

Опитвали ли сте някога да създадете WordPress плъгин? Нека поговорим за вашия опит в секцията за коментари по-долу.