metoda update().

Această metodă vă oferă posibilitatea de a verifica și procesa valorile transmise înainte de utilizare. De asemenea, avem capacitatea de a lua decizii bazate pe valori vechi. Metoda update() ar trebui să returneze o matrice care să conțină variabilele pe care urmează să le utilizați pentru a afișa widget-ul pe site. WordPress transmite două argumente: o serie de valori noi și o serie de valori originale.

Actualizare funcție publică ($newInstance, $oldInstance) ( $values ​​​​= array(); $values["title"] = htmlentities($newInstance["title"]); $values["text"] = htmlentities($ newInstance[ "text"]); returnează $valori)

WordPress va salva aceste valori pe cont propriu, așa că nu trebuie să vă faceți griji pentru asta.

metoda widget().

Această metodă este folosită pentru a afișa un widget direct în bara laterală a site-ului. Metoda are două argumente: $args— argumente widget (o matrice care conține unele informații despre widget), $instanţă— o matrice cu variabile asociate cu widget-ul. În cazul nostru $args nu contează.

Widget de funcție publică ($args, $instance) ( $titlu = $instanță["titlu"]; $text = $instanță["text"]; ecou "

$titlu

Ca rezultat, vom obține aspectul final al widget-ului:

Gata! Acest plugin foarte simplu vă permite să afișați text simplu pe site-ul dvs. folosind widget-uri.

Se crede că sarcina principală a unui webmaster este de a atrage un public de utilizatori. Dar nu este așa. Puteți atrage câte publicuri doriți, dar dacă nu sunt loiali, rezultatele conversiei vor fi dezamăgitoare. Pentru a crește activitatea utilizatorului atunci când interacționează cu site-ul, merită să creați un widget pentru acesta.

Despre câte widget-uri diferite avem nevoie...

Dacă te uiți la dicționar, se dovedește că un widget este o mică aplicație grafică care este încorporată în interfața de utilizator a unui browser sau a unui site web și afișează unele informații dintr-un anumit loc. De aceea pot fi foarte diverse. Când vine vorba de crearea unui widget pentru un site web, aceasta înseamnă de obicei una dintre cele trei aplicații grafice:

Ei bine, haideți să ne dăm seama cum să creați fiecare dintre aceste widget-uri - și de ce aveți nevoie de ele în primul rând.

Crearea unui widget pentru marcaje vizuale (pentru Wordpress și alte motoare)

Serviciul de marcare vizuală de la Yandex a devenit recent din ce în ce mai popular. Este confortabil, frumos și funcțional. Marcajele vizuale sunt încorporate în browsere bazate pe motorul Chromium din magazinul corespunzător și sunt, de asemenea, incluse în Yandex.Browser imediat din cutie.

Din punct de vedere vizual, acest serviciu este un panou cu link-uri către site-uri. Dacă adăugați un link către propria pagină web, în ​​marea majoritate a cazurilor va arăta incredibil de plictisitor - doar un nume de domeniu pe un fundal colorat.

Este nevoie doar de puțin efort pentru a-l face mai atractiv pentru utilizatori. Și anume, pentru a „face ceva magie” cu API-ul Tableau.

Dar mai întâi este necesar creați un logo site-ul. Imaginea trebuie să respecte următoarele reguli:

• Format.PNG;
• Dimensiune 150x60 pixeli;
• Fundal transparent.

Widgetul în sine este scris în XML. Tastați următorul cod în notepad:

„versiunea”: „1.0”,

„api_version”: 1.

„logo”: „http://your_site_domain/logo_file_address/logo_file_name.png”,

„culoare”: „#desired_color_number_in_HEX”,

Următorul pas este să faci puțină magie cu PHP. Ei bine, sau HTML - în funcție de limba în care este scris motorul site-ului. Dacă antetul este în header.php, atunci se fac modificări acestui fișier. Și dacă într-un alt loc, următorul rând trebuie introdus acolo, în consecință.

Și iată codul pentru a-l activa:

Acest cod trebuie inclus în antet - adică între etichetele HTML de deschidere și de închidere .

Widgetul din Visual Bookmarks Board este actualizat automat. Dar nu instantaneu. Pasionații de codificare îl pot face chiar actualizabil prin afișarea diferitelor notificări.

Widget de site pentru pagina de pornire Yandex

Mulți oameni știu că pagina principală a motorului de căutare Yandex este personalizabilă. Și puteți plasa un widget al site-ului dvs. pe acesta - astfel încât utilizatorii să poată afla actualizări fără a accesa pagina web în sine. Acesta va fi un mare avantaj, deoarece va reduce statisticile de respingere și va crește clasamentul în motoarele de căutare a proiectului.

Creați un widget pentru site nu e complicat. Nici măcar nu trebuie să înveți HTML! Acest widget necesită ca site-ul să aibă un flux RSS. Motorul Wordpress îl are implicit și se află la următoarea adresă:

http://domeniu/feed

Dar pentru alte motoare va trebui să le creați singur.

Deci, widgetul pentru Yandex se face în doi pași simpli:

1. Mergi la http://wdgt.yandex.ru/widgetsși faceți clic pe butonul „Creați widget”;
2. Completați panourile cu numele widgetului, descrierea, imaginea și adresa feedului RSS.

Acest widget poate fi plasat și pe site-ul dvs. - pe o bară laterală, de exemplu, sau într-o fereastră pop-up.

Widget Facebook

au devenit parte integrantă a vieții de zi cu zi a omului modern. Adevărat, în „latitudinile noastre” cele mai comune sunt „VK” și „Odnoklassniki”. Cu toate acestea, Facebook este cel mai bun loc pentru a promova un site web care oferă în mod special orice bunuri sau servicii.

De ce? Motivul aici este simplu. Pe Facebook, cel mai simplu mod este de a organiza promovarea virală a conținutului în rândul „elitei intelectuale”. Diverși profesioniști din diverse domenii preferă să folosească această rețea socială specială, ceea ce înseamnă că este cel mai ușor să creezi un public loial, „gânditor” de la care poți chiar să adunați informații noi.

Dezvoltatorii Facebook sunt conștienți de faptul că proprietarii de portaluri de informații preferă să-și folosească rețeaua socială și, prin urmare, simplifică semnificativ procesul de creare și postare a widget-urilor.

Așadar, iată instrucțiuni pas cu pas despre cum se face cum se creează un widget pentru un site web. Se presupune doar că site-ul dvs. - sau compania - are deja o pagină Facebook corespunzătoare creată de cineva care are și un cont Facebook:

1. Trebuie să vă autentificați în numele acestei persoane (conectați-vă folosind numele de utilizator și parola) și faceți clic pe butonul „Editați profilul” de pe pagina principală a profilului;
2. Derulați în partea de jos a paginii și deschideți „Dezvoltatori”;
3. Pe pagina care se deschide, găsiți butonul Partajare, însoțit de semnul Like, și faceți clic cu îndrăzneală pe el;
4. Apoi trebuie să selectați „Pluginuri sociale”;
5. Găsiți Like Box;
6. Se va deschide pagina de setări widget, unde îi puteți seta dimensiunile, schema de culori, conținutul și componenta vizuală;
7. Apoi, făcând clic pe butonul Obține cod, puteți obține codul selectând limbajul de marcare care este cel mai compatibil cu motorul site-ului.

Widget pentru Wordpress

Acum au mai rămas câteva lucruri mici - plasați widgetul pe site. Pentru cel mai popular motor - Wordpress - acest lucru va necesita adăugarea codului în două locuri diferite. Primul este subsolul. Acolo este adăugat un script JAVA care definește funcționalitatea widget-ului.

Al doilea este locul unde widget-ul este plasat direct, de exemplu, o bară laterală. Acolo trebuie să copiați codul CSS cu blocul div în care se află linkul către script.

Pentru alte motoare, inclusiv cele auto-scrise sau statice– creat în HTML pur și caracterizat printr-o procedură foarte complexă de adăugare a conținutului – se folosește o tehnică ușor diferită. Cu toate acestea, în aceste cazuri, este mai ușor să contactați creatorul site-ului decât să încercați să vă dați seama de complexitatea codului.

Copyright © 2016 „Design ONE”

În acest articol vom crea un widget care va afișa cele mai recente postări dintr-o anumită categorie cu miniaturi. Dacă dezvoltăm acest subiect, putem trage o concluzie despre postările cu teaser, cele populare, cele mai comentate etc. Totul depinde de imaginația ta și de rezultatul dorit. Ei bine, hai să începem încet să scriem widget-ul. Articolul nu va fi mic, puțin complicat, conceput în principal pentru cei care sunt deja familiarizați cu WordPress, au creat teme de la zero, sunt bine versați în cod și, desigur, au stăpânire asupra aspectului. Să începem.

Privind în viitor, vreau să arăt ce se va întâmpla până la urmă. Aceasta este una dintre opțiunile posibile, deoarece vor exista mai multe setări în widget și aspectul se poate schimba în funcție de dorințele tale.

În primul rând, trebuie să creăm un fișier care va fi responsabil pentru ieșirea widget-ului. Voi spune imediat că totul poate fi scris direct în fișierul cu funcții personalizate WordPress - funcții.php. Dar nu-mi place să-l aglomera cu cod inutil, așa că recomand să includ un fișier separat. În folderul cu tema, creați un fișier, de exemplu widget_gnat_thumb.php. Apoi, trebuie să includeți acest fișier în funcții.php. Pentru a face acest lucru, deschide functions.php și la sfârșit, înainte de închiderea tag-ului PHP - ?> , dacă nu există, adăugați pur și simplu următoarea linie la sfârșit:

Include("widget_gnat_thumb.php");

Ne-am conectat fișierul, acum trebuie să-l umplem singuri cu cod, care va crea widget nou. Pentru a face acest lucru, mai întâi trebuie să adăugați prima parte a codului.

Până când vom adăuga tot codul, nu vom putea verifica funcționarea widget-ului, deoarece veți primi o eroare. Așa că încercați să citiți totul cu atenție, să urmați instrucțiunile și să nu ratați nimic, pentru a nu vă zgâria mai târziu dacă ceva nu merge. Metoda funcționează 100% și codul este preluat dintr-un widget funcțional.

Sunt puncte importante aici. În a doua linie setăm numele widget-ului nostru - Gnat_thumb_Widget. În a cincea linie setăm ID-ul widget-ului nostru, în acest caz este - widget_gnat_thumb. Dacă creați o mulțime de widget-uri, atunci fiecare ar trebui să aibă propriile sale, adică unice.

În a șasea linie setăm numele widget-ului, acesta va fi afișat în lista de widget-uri. Linia 7 stabilește descrierea widget-ului, care va fi afișată sub nume. Un exemplu ar arăta astfel:

Acum este timpul pentru următoarea parte a codului. Acesta este codul responsabil pentru inițializarea setărilor și adăugarea acestora. Acest cod se va modifica și în funcție de structura widget-ului și de numărul de setări. De asemenea, dacă faci mai multe widget-uri, atunci fiecare dintre ele ar trebui să aibă setări cu nume unice, astfel încât să nu existe conflicte.

Actualizare funcție publică($new_instance, $old_instance) ( $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance[[ "cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]);

Dacă le descrii pe fiecare separat, se dovedește că a doua linie conține inițializare, iar apoi setările în sine. Setările în sine vor fi descrise puțin mai târziu, dar acum le vom analiza separat și vom afla care dintre ele este responsabil pentru ce.

• title_thumb- Numele widget-ului, care este setat atunci când este activat și va fi afișat pe pagina site-ului. Ești mai familiar cu el deoarece... Titlu.
• cat_degetul mare- Aceasta este o setare pentru selectarea unei categorii din care vor fi afișate intrările noastre. Adică vom alege o categorie și lista noastră va depinde de asta.
• number_post_thumb - Această setare va seta numărul de înregistrări care vor fi afișate. Vom crea un câmp text simplu în care va trebui să introduceți un număr.
• dimensiunea_degetul mare- Aceasta este o setare care vă va solicita să selectați dimensiunea miniaturii (imaginea) de lângă titlul postării.

După cum înțelegeți, pentru a adăuga o setare, trebuie să adăugați o linie și să indicați numele setării

$instance["setting_name"] = strip_tags($new_instance["setting_name"]);

Acum să începem să afișăm aceste setări. Acesta este ceea ce veți vedea în panoul de administrare din secțiune Widgeturi. Deocamdată avem un widget și poate fi văzut în lista celorlalte widget-uri. Are un nume și o descriere. Imaginea de mai sus arată cum arată.

Prima setare va afișa un câmp - Titlu. Să adăugăm următoarea bucată de cod.

">Titlu " name="get_field_name("titlu_thumb"); ?>" type="text" value="" />

După cum am scris mai sus, adăugăm pur și simplu o intrare în care va trebui introdus titlul. După cum puteți vedea în cod, specificăm numele setării de 4 ori - title_thumb. Folosind acest exemplu, puteți seta nu numai titlul, ci și altceva, de exemplu, mai târziu vom seta rezultatul numărului de postări în același mod. Această setare va arăta astfel în panoul de administrare:

Acum să trecem la următoarea setare. Aceasta va fi alegerea categoriei. Aici folosim o listă derulantă selectată. Este convenabil și rapid. Faceți clic pe listă și selectați o categorie. Dacă nu trebuie să selectați o categorie, ci pur și simplu să afișați cele mai recente postări de pe întregul site, atunci acest element poate fi omis.

Codul pe care trebuie să-l adăugăm la fișierul nostru widget va fi următorul:

">Selectați o categorie " id="get_field_id ("cat_thumb"); ?>">term_id) . """ . selected($instance["cat_thumb"], $link_cat->term_id, false) . ">" . $link_cat->name . "\n"; ) ?>

După cum puteți vedea, numele setării este, de asemenea, indicat peste tot - cat_degetul mare. Deci, dacă ați introdus numele dvs. la început, atunci ar trebui să fie potrivit și aici. Această listă va genera automat toate categoriile. În panoul de administrare va arăta astfel:

Următoarea setare va fi aceea de a indica numărul de înregistrări care vor fi afișate. Adică, widgetul nostru va afișa atâtea rânduri cu nume de postări câte introduceți în acest câmp. Cum am scris mai sus. Această setare este similară cu titlul. Acesta este un câmp de introducere similar, doar că aici va trebui să introduceți un număr.

Ca și în setările anterioare, codul de mai jos conține același nume peste tot - number_post_thumb. Adăugăm următorul cod în fișierul nostru:

">Numărul de postări " name="get_field_name("numer_post_thumb"); ?>" type="text" value="" />

Urmează ultima setare. Acesta va seta dimensiunea miniaturii, poza care va fi lângă titlul postărilor. Îmi place această setare deoarece puteți alege dimensiunea în funcție de nevoile dvs., dimensiunea barei laterale etc. Adică, nu este necesar să setați strict dimensiunea în stiluri. Îl poți schimba cel puțin în fiecare zi, în funcție de starea ta de spirit. Ca de obicei, adăugați codul:

">Selectați lățimea miniaturii " id="get_field_id("dimensiunea_degetul mare"); ?>"> ... 45 75 100 125

După cum am menționat deja, lista derulantă cu opțiuni este de asemenea folosită aici. Întrebăm câteva puncte. primul este inactiv, apoi setăm dimensiuni stricte. Dacă doriți, îl puteți schimba oricând cu al dumneavoastră sau puteți crește cantitatea.

Încă un moment. ÎN valoare, am setat valorile size_1, size_2, size_3 etc. Aceste valori vor fi clase în viitor. Adică, fiecărei clase i se va da propriile stiluri, care vor reglementa dimensiunea miniaturii. Un alt element va apărea în setările widget-ului din panoul de administrare:

Am terminat cu setările, acum să trecem la partea de ieșire. Adică la ceea ce va fi vizibil pe site, ca în imaginea de la începutul articolului. În esență, vom adăuga markup care va fi afișat ca cod HTML pe site. Pentru a face acest lucru, adăugați o altă bucată de cod:

have_posts()) ( $populargb->the_post(); ?>
• ">
  Смотреть больше!}

După cum puteți vedea, titlului, lista și articolele individuale au propriile lor clase. Schimbați-l cu al dumneavoastră dacă doriți, dar aveți grijă. Să ne uităm puțin la acest cod pentru a fi mai clar.

• Aici afișăm titlul nostru. După cum înțelegeți, pentru a afișa o setare în cod HTML, trebuie doar să adăugați următorul cod și să indicați numele setării în interior.

  Ceea ce specificați sub acest nume va fi afișat la apel.

• Urmează lista ul, care afișează de fapt numele postărilor cu miniaturi. Pentru ieșire, folosesc WP_Query. Nu voi intra în detalii despre cum funcționează, dacă doriți, îl puteți citi în articol - sau. WP_Query este folosit peste tot aici.

  Pentru WP_Query setăm următorii parametri:

  • posts_per_page=- Acesta este numărul de înregistrări afișate. Desigur, îi atribuim setarea numper_post_thumb.
  • pisica=- Acesta este parametrul responsabil pentru categoria din care ciclul își va selecta înregistrările. Aici atribuim cat_thumb.
• Urmează marcarea înregistrării de ieșire. Îl poți vedea în cod. că afișăm miniatura, titlul postării, data publicării și linkul - Vezi mai mult. Puteți modifica, adăuga și șterge totul în funcție de nevoile dvs.
• Miniatura noastră este înfășurată și atribuită lui class="thumb iar lângă setările de conectare. Adică, sunt atribuite două clase, una constantă - degetul mare și a doua este setată în setările widgetului. Este exact ceea ce am scris mai sus când am descris setările pentru dimensiunea miniaturii. Adică, în funcție de dimensiunea miniaturii pe care o alegeți, această clasă este atribuită. De exemplu, dacă specificați dimensiunea 45 cu 45, atunci clasa este atribuită - dimensiunea_1. Codul HTML va arăta astfel - class="thumb size_1".

Aceasta este întreaga ieșire a widget-ului. Dacă te uiți la asta, nu este absolut nimic complicat, trebuie doar să ai măcar puțină experiență. Pentru un începător, desigur, acesta este cod pur Da Vinci :).

Rămâne să adăugați ultima parte a codului. Vom înregistra widget-ul nostru și îl puteți testa în acțiune.

În a patra linie indicăm numele widget-ului, care a fost indicat chiar la început - Gnat_thumb_Widget

Acum tot codul:

__(„Widget pentru afișarea postărilor cu miniaturi mici”, „domeniu_text”),)); ) actualizare publică a funcției($new_instance, $old_instance) ( $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance ["cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]); $instance["size_thumb"] = strip_tags["size_thumb"]); ?>

">Titlu " name="get_field_name("titlu_thumb"); ?>" type="text" value="" />

">Selectați o categorie " id="get_field_id ("cat_thumb"); ?>">term_id) . """ . selected($instance["cat_thumb"], $link_cat->term_id, false) . ">" . $link_cat->name . "\n"; ) ?>

">Numărul de postări " name="get_field_name("numer_post_thumb"); ?>" type="text" value="" />

">Selectați lățimea miniaturii " id="get_field_id("dimensiunea_degetul mare"); ?>"> ... 45 75 100 125

have_posts()) ( $populargb->the_post(); ?>
• ">
  Смотреть больше!}

Pentru a seta stiluri și a afișa mai corect concepute, trebuie să adăugați următoarele linii în fișierul de stil stil.css.

Titlebg(background:#eee;line-height:35px;text-align:center;litera-spacing:-0.2px;font-size:16px;margin-bottom:20px;) .widget(margin-bottom:25px;box; -sizing:padding-box;padding:0 5px;) .widget ul(font-size:11px;margin:0;padding-right:15px;text-transform:none;line-height:15px;) .widget ul ul (margine-stânga:15px;) .widget ul li(culoare:#222;padding:5px 0;border-bottom:1px punctat #ddd;) .widget .comment-author-link(font-weight:bold;) . widget ul li:last-child(border-bottom:none;) .widget a(text-decoration:none;color:#444;font-weight:normal;) .widget a:hover,.widget a:focus,. widget a:activ(text-decoration:subline;) .gnat_thumb(padding:5px;) .gnat_thumb a(font-size:11px;line-height:11px;margin-bottom:5px;display:block;) .thumb( float:left;border:1px solid #eee;padding:2;margin:0 10px 10px 0;) a.more_read(font-size:11px;text-align:right;font-weight:bold;) .size_1 img( width:45px;height:auto;) .size_2 img(width:75px;height:auto;) .size_3 img(width:100px;height:auto;) .size_4 img(width:125px;height:auto;)

Aceste stiluri sunt aproximative și pot să nu corespundă cu ceea ce aveți nevoie sau pot intra în conflict cu stilurile deja disponibile pe site-ul dvs., așa că vă recomand să utilizați doar ultimele 4 rânduri, care sunt necesare pentru afișarea corectă a dimensiunilor miniaturilor:

Size_1 img(width:45px;height:auto;) .size_2 img(width:75px;height:auto;) .size_3 img(width:100px;height:auto;) .size_4 img(width:125px;height:auto; )

Articolul s-a dovedit, așa cum am promis, nu scurt. Am încercat să scriu mai clar, așa că dacă ceva nu este în regulă, îmi pare rău. Voi răspunde mai detaliat în comentarii.

Asta e tot, mulțumesc pentru atenție. 🙂

În timp ce îmi răsfoiam blogul, am observat această caracteristică ciudată. Nu am un link către afacerea mea. Nicăieri. Și nu este nevoie să aștept ca vizitatorii blogului meu să scrie sau să mă sune și să mă întrebe ce fac în cele din urmă.

Bună ziua, dragii mei prieteni și vizitatori ai site-ului blogului

Cum se creează un widget pentru WordPress

Nu, după ce am scris acest articol, nu voi posta link-uri în fiecare dintre ele noi - nu va fi corect și nu va funcționa. Dar faptul că widgetul care va fi plasat înaintea acestui text este scris este da)))

În primul rând, pe blogul tău trebuie să te poziționezi ca persoană, expert, brand.

De ce? Am scris deja despre asta în articol

Și în primul rând, când mi-a venit prima idee să fac asta, a urmat imediat o alta: „Stai, e grozav, dar cum voi face de fapt asta?” Nu am mai făcut asta până acum. Nu, am postat un widget gata făcut. Dar a face unul nou a fost deja o provocare pentru mine. Și am acceptat-o.

Deci, un obiectiv a fost stabilit. Creează un widget în partea dreaptă a coloanei blogului tău, frumos și atractiv, care ar avea un link către o anumită resursă. Dar mai întâi, să ne dăm seama ce este exact un WIDGET?

Și bineînțeles, să ne întoarcem la sursa originală, adică. la Wikipedia:

Un widget este o interfață grafică primitivă care are un aspect standard și efectuează acțiuni standard.

Cu alte cuvinte, acesta este un obiect grafic frumos care efectuează anumite acțiuni. În cazul meu, acționează ca un fel de „dirijor” făcând clic pe acesta ne duce la o anumită resursă.

Realizarea unui widget

Deci, de ce avem nevoie pentru a face un widget?:

1. De fapt, blogul în sine este pe WordPress
2. Imagine grafică a widget-ului (desen în format .png, alte opțiuni sunt posibile, nu am încercat alte formate)
3. Resursa la care widgetul nostru se va „conecta”

Asta e tot. Cele mai minime cerințe. Și toată această procedură va dura cel mult 10 minute.

Să începem în ordine

1. Blog pe WordPress. În contextul acestui articol, nu mă voi angaja să vă spun cum să creați un blog pe WordPress. Acesta este subiectul a mai mult de o lecție și vom presupune că aveți deja un blog gata făcut. Dacă nu este cazul, iată, cursul meu gratuit. „Blog DIY: Începutul”
2. Puteți utiliza imaginea grafică a viitorului dvs. widget la discreția dvs. Fie că va fi un desen pe care îl desenați singur sau dacă va fi gata făcut sau descărcat de pe Internet - rămâne la latitudinea dvs. să decideți. Am luat unul gata făcut, pe care compania însăși mi l-a oferit cu amabilitate.

Cum să faci asta, vezi mai jos:

Deci, am încărcat o imagine grafică a viitorului widget pe blogul nostru.

Trageți widgetul „Text”, ca în figură, în locația dorită din bara laterală a widgetului.

În fereastra care se deschide, introduceți următoarele date:

În loc de http://alexan... - scrieți linkurile corecte care conduc la imaginea widget-ului și a resursei.