Како направити ВордПресс додатак за своју веб апликацију

Данас ћемо видети како да направимо врло једноставан ВордПресс додатак за било коју веб апликацију која треба да убаци део кода на вашу веб локацију.

Да бисте пратили овај водич, потребно вам је неко знање из ових основа:

  • ПХП и ООП
  • ЈаваСцрипт (користићемо јКуери и Ајак)
  • Развој ВордПресс-а (јер је већина функција из ВордПресс језгра).

Резултат овог водича можете пронаћи на овом Гитхуб репозиторијуму.

Ове веб апликације могу бити било шта, попут ЦразиЕгг, Фресхбоок, Гоогле Аналитицс, Фацебоок Пикел или Феедиер. Зашто? Сви они морају да убризгају неки ХТМЛ / ЈаваСцрипт код у вашу веб локацију у разне сврхе.

Овај „код“ се увек параметрише променљивим и обично мучи власника веб локације. То је зато што морате да уредите предлошке теме. Па, шта кажете да направимо додатак који ће то учинити за нас? У реду, урадимо то!

1. корак: Пронађите своју веб апликацију

Циљ овог упутства је стварање ВордПресс додатка који додаје ВордПресс страницу администратора. Поред тога, додаћемо и нека подешавања за конфигурисање виџета апликације на локацији и аутоматско убризгавање ХТМЛ / ЈС кода у нашу веб страницу. Ништа фенси, само нешто што добро функционише.

Имајте на уму: потребна нам је веб апликација за овај водич. За овај пример користићемо Феедиер. Међутим, ако имате другу веб апликацију коју бисте желели да користите у овом упутству, учините то. Само преименујте било шта што се зове „феедиер“ именом апликације и прилагодите подешавања ономе што тој апликацији треба. Већина њих ће вам дати исечак који ћете додати на своју веб локацију како би она функционисала.

Ево кратког брифинга о Феедиеру ако никада нисте чули за њега:

  • То је алат за прикупљање повратних информација који користи анкете да би разумео ваше кориснике
  • Веома је флексибилан
  • Бесплатно је!
  • Има добар АПИ (овде је веома важан)
  • Има виџет на локацији (овде је веома важан)
  • Омогућава вам да наградите своје купце
  • Омогућава вам да креирате условна питања
  • Има комплетну контролну таблу аналитичког извештаја
  • Омогућава вам управљање повратним информацијама појединачно

Ево виџета који желимо да додамо аутоматски:

Ако сте се пријавили за Феедиер, код можете једноставно пронаћи на картици Дељење анкете:

Корак 2: Подесите наш додатак и његову архитектуру

ВордПресс додаци су по дизајну врло једноставни. Нашем додатку ће требати само две датотеке.

  • феедиер.пхп : ПХП датотека главног додатка.
  • ассетс / јс / админ.јс : ЈаваСцрипт скрипта за спремање опција помоћу Ајака.

Можете да направите нови директоријум „феедиер“ (или назив ваше веб апликације) у свом вп-цонтент / плугинс / фолдеру.

Најважнија датотека ће бити класа феедиер.пхп додатка . Ево његове структуре:

Овде радимо неколико ствари:

  • Изјава о нашем додатку помоћу коментара у заглављу
  • Дефинисање неколико корисних константи да бисте могли лако да пронађете УРЛ додатка и ПАТХ
  • Проглашавање наше класе додатака која ће садржати све што нам је потребно у овој додатној компоненти. За сада нам треба само метода конструктора.

Већ бисте требали да видите додатак на својој страници Додаци, иако још увек не ради ништа:

Корак 3: Креирајте нашу администраторску страницу

У овом делу ћемо додати нову Феедиер административну страницу на нашу ВордПресс страницу и динамички дохватити наше анкете из Феедиер АПИ-ја.

У конструктору наше класе, региструјмо три нове радње потребне за додавање администраторске странице на ВордПрессу:

  • аддАдминМену ће додати нову страницу у ВордПресс левом менију. Такође ће бити упућен повратни позив другој методи која садржи садржај странице.
  • стореАдминДата ће се позвати сваки пут када корисник кликне на дугме „Сачувај поставке“.
  • аддАдминСцриптс ће регистровати нову ЈаваСцрипт датотеку нашем ВордПресс администратору како би сачувао податке обрасца. Али такође размењује неке променљиве између ПХП и ЈаваСцрипт стране.

Први корак је врло лак. Само региструјемо страницу, овако:

Као што видите, користимо функције локализације ВордПресс-а за све низове. Имајте на уму да

array($this, ‘adminLayout’)

је место где називамо другу методу која садржи садржај странице. Образац треба прилагодити вашој веб апликацији.

Овде прво морамо добити јавни и приватни Феедиер АПИ кључеве. Једном сачувани, користићемо приватни кључ за динамичко преузимање наших анкета. Кад год добијемо анкете, а не АПИ грешку, приказујемо неке нове опције за конфигурисање виџета.

На почетку ове методе можете видети да сачуване податке прво добијамо помоћу:

$data = $this->getData();

И преузимање анкета из Феедиер АПИ-ја:

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

Дакле, прогласимо прву:

Ова функција само чита опцију нашег додатка и враћа нам низ тако да можемо сачувати више вредности у истој опцији.

Да би други метод функционисао, потребан нам је приватни кључ Феедиер. Ово зависи од првог приступника овом кључу сачуваном у опцији:

Овде је документован Феедиер АПИ, тако да можете видети шта ћете добити у одговору.

У овом тренутку имамо потпуно нову Админ страницу. Али ништа се не дешава када кликнемо на дугме за чување, јер још увек нема механизма за чување .

Довољно добро, сачувајмо своје податке!

Као што је већ поменуто, сачуваћемо своје податке помоћу АЈАКС-а. Због тога морамо да региструјемо нову ЈаваСцрипт датотеку и размењујемо податке помоћу функције вп_лоцализе_сцрипт ():

Такође морамо додати нову датотеку /ассетс/јс/админ.јс . То ће једноставно упутити Ајак позив, а ВордПресс ће аутоматски усмјерити захтјев исправно на праву методу (већ урађену у конструктору). Овде можете прочитати више о томе како ВордПресс паметно обрађује АЈАКС захтеве.

У овом тренутку можемо да кликнемо на дугме за чување и горња скрипта ће упутити ХТТП ПОСТ захтев на ВордПресс. Такође додајемо параметар акције који садржи: сторе_админ_дата (који смо прогласили на почетку у овом делу у конструктору):

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

Метода стореАдминДата ће примити ПОСТ захтев и сачувати вредности које су нам потребне у нашој ВордПресс опцији.

Неколико напомена о горњој методи:

  • Користимо „ВордПресс нонце“ да бисмо се побринули за сигурност и осигурали да ово долази са веб локације, а не да хакер лажира захтев.
  • Идентификујемо поља која треба да сачувамо помоћу префикса „феедиер_“. Једном примљени, петљамо кроз све податке $ _ПОСТ и само та поља чувамо. Такође уклањамо префикс пре него што сачувамо свако поље.

То је то за поступак штедње. Када кликнемо на саве, можемо видети ПОСТ захтев и наши подаци се чувају у бази података у табели вп_оптионс .

Савршено, завршили смо са админ страницом.

Корак 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 ?

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.