Как да създадете приставка за WordPress за вашето уеб приложение

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

За да следвате този урок, имате нужда от някои познания по тези основи:

  • PHP и OOP
  • JavaScript (ще използваме jQuery и Ajax)
  • Разработка на WordPress (тъй като повечето функции са от ядрото на WordPress).

Можете да намерите работен резултат от този урок в това хранилище на Github.

Тези уеб приложения могат да бъдат всякакви, като CrazyEgg, Freshbook, Google Analytics, Facebook Pixel или Feedier. Защо? Всички те трябва да инжектират някакъв HTML / JavaScript код на вашия сайт за различни цели.

Този „код“ винаги се параметризира с променливи и обикновено е мъка за собственика на сайта. Това е така, защото трябва да редактирате шаблоните на темата. И така, какво ще кажете да създадем плъгин, който да направи това за нас? Добре, нека го направим!

Стъпка 1: Намерете вашето уеб приложение

Целта на този урок е да създаде приставка за WordPress, която добавя страница за администриране на WordPress. Освен това ще добавим и някои настройки, за да конфигурираме приспособлението на сайта на приложението и да инжектираме автоматично HTML / JS кода в нашата уеб страница. Нищо изискано, просто нещо, което работи добре.

Моля, обърнете внимание: ние се нуждаем от уеб приложение за този урок. За този пример ще използваме Feedier. Ако обаче имате друго уеб приложение, което искате да използвате в този урок, моля. Просто преименувайте всичко с име „feedier“ с името на приложението си и адаптирайте настройките към това, от което се нуждае. Повечето от тях ще ви дадат фрагмент, който да добавите към вашия сайт, за да го накарате да работи.

Ето кратък инструктаж на Feedier, ако никога не сте чували за него:

  • Това е инструмент за събиране на обратна връзка, който използва проучвания, за да разбере вашите потребители
  • Много е гъвкав
  • Безплатно е!
  • Има добър API (много важен тук)
  • Има приспособление на място (много важно тук)
  • Позволява ви да възнаградите клиентите си
  • Позволява ви да създавате условни въпроси
  • Има пълно табло за аналитичен отчет
  • Позволява ви да управлявате обратната връзка поотделно

Ето приспособлението, което искаме да добавим автоматично:

Ако сте се регистрирали за Feedier, можете просто да намерите кода в раздела Споделяне на вашето проучване:

Стъпка 2: Настройте нашия плъгин и неговата архитектура

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

  • feedier.php : PHP файлът на основната приставка.
  • assets / js / admin.js : JavaScript скрипт за запазване на опциите с помощта на Ajax.

Можете да създадете нова директория „feedier“ (или име на вашето уеб приложение) във вашата wp-content / plugins / папка.

Най-важният файл ще бъде класът на feedier.php на приставката . Ето неговата структура:

Тук правим няколко неща:

  • Деклариране на нашия плъгин с помощта на коментарите в заглавката
  • Дефиниране на няколко полезни константи, за да можете лесно да намерите URL адреса и PATH на приставката
  • Деклариране на нашия плъгин клас, който ще съдържа всичко необходимо в този плъгин. Засега се нуждаем само от метод на конструктор.

Вече трябва да видите приставката на страницата си с приставки, въпреки че все още не прави нищо:

Стъпка 3: Създайте нашата администраторска страница

За тази част ще добавим нова администраторска страница на Feedier към нашия WordPress сайт и ще изтеглим динамично нашите анкети от API на Feedier.

В конструктора на нашия клас, нека регистрираме три нови действия, които са необходими за добавяне на администраторска страница в WordPress:

  • addAdminMenu ще добави нова страница в лявото меню на WordPress. Ще има и обратно извикване към друг метод, съдържащ съдържанието на страницата.
  • storeAdminData ще се извиква всеки път, когато потребителят щракне върху бутона „Запазване на настройките“.
  • addAdminScripts ще регистрира нов JavaScript файл на нашия администратор на WordPress, за да запази данните на формуляра. Но той обменя и някои променливи между PHP и JavaScript.

Първата стъпка е много лесна. Ние просто регистрираме страницата по следния начин:

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

array($this, ‘adminLayout’)

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

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

В началото на този метод можете да видите, че първо получаваме запазените данни с:

$data = $this->getData();

И получаване на анкетите от API на Feedier:

$surveys = $this->getSurveys($data[‘private_key’]);

Така че нека декларираме първата:

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

За да работи вторият метод, ни трябва частният ключ Feedier. Това зависи от първия, който има достъп до този ключ, запазен в опцията:

API на Feedier е документиран тук, така че можете да видите какво ще получите в отговора.

В този момент имаме изцяло нова административна страница. Но нищо не се случва, когато ние трябва да кликнеш върху бутона Запазване, защото няма механизъм спестяване - все още .

Достатъчно добре, нека запазим данните си!

Както споменахме по-горе, ще запазим данните си с помощта на AJAX. Следователно трябва да регистрираме нов JavaScript файл и да обменяме данни с помощта на функцията wp_localize_script ():

Също така трябва да добавим нов файл /assets/js/admin.js . Това просто ще направи извикване на Ajax и WordPress автоматично ще насочи заявката правилно към правилния метод (вече направен в конструктора). Можете да прочетете повече за това как WordPress интелигентно обработва заявки AJAX тук.

В този момент можем да щракнем върху бутона за запазване и горният скрипт ще направи HTTP POST заявка към WordPress. Също така добавяме параметър за действие, съдържащ: store_admin_data (който декларирахме в началото в тази част в конструктора):

add_action( ‘wp_ajax_store_admin_data’, array( $this, ‘storeAdminData’ ) );

Методът storeAdminData ще получи заявката POST и ще запази необходимите ни стойности в нашата опция WordPress.

Няколко бележки по горния метод:

  • Използваме „WordPress nonce“, за да се справим със сигурността и да се уверим, че това идва от уебсайта, а не хакер, който фалшифицира заявката.
  • Идентифицираме полетата, които трябва да запазим, използвайки префикс “feedier_”. Веднъж получени, ние преглеждаме всички $ _POST данни и запазваме само тези полета. Премахваме и префикса, преди да запазим всяко поле.

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

Отлично, приключихме със страницата на администратора.

Стъпка 4: Поставете динамичния код автоматично в нашите страници

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

Нещо като:

Thus, the first thing we want to do is to create a new method to our plugin that will print this code depending on the variables set by the user. So, using the architecture we already set up in the last part:

Now, we just need to call this function on every page load to add it at the bottom of the page. To do this, we’ll hook our method to the wp_footer action. By registering a new action into our class’ constructor:

That’s it!

Any questions, feedback, or ideas? Let me know in the comments!

You can find a working version of this tutorial on this Github repository.

2Fwebd/feedier-wordpress-plugin

Contribute to feedier-wordpress-plugin development by creating an account on GitHub.pxlme.me

Note that this is first version of the plugin, and many things can be improved. I’m open to suggestions and improvements. ?

We are building Feedier. It becomes a no-brainer to collect feedback and build relationships with your customers!

Feedier - Next generation feedback

Meet Feedier, the next generation customer feedback software that lets you collect valuable feedback. Reward, engage…feedier.com

Convinced? Sign up for free at feedier.com ?

Original text


Don’t forget to clap our article and subscribe to get more amazing articles if you liked it?. You can also find us on Twitter.

This article was initially published on our blog here.