Adăugarea unui set de coduri scurte de răspuns la site-ul dvs. WordPress

Astăzi vom lua o rețea personalizată de bază creată cu CSS și integrându-o în WordPress prin intermediul codurilor scurte. Presupun ca toti cititorii au o intelegere de baza despre CSS, asa ca nu voi mai acoperi nimic din asta, si presupun ca ai deja o tema pentru WordPress si ca vom adauga doar biti. blocat în!

Pasul 1: Grila noastră CSS

Înainte de a începe, vom merge mai departe și vom crea un css dosar și apoi un fișier în interiorul apelat grid.css. Din cauza cantității de utilizare a tabletelor și a tabletelor acum, vom merge mai departe și vom adăuga și partea responsabilă pentru grila noastră. Am continuat și am comentat acest lucru pentru a face mai puțin confuz pentru oricine nu este deja familiarizat cu acesta.

 / * ------------------------------------------------ ---------------------- * / / * Grilă personalizată / * -------------------- -------------------------------------------------- * / .container marja: 0 auto; lățime: 940px; Poziția: relativă;  .container.one-jumătate, .container. un-al treilea, .container. un-al patrulea, .container. două treimi, .container. trei-al patrulea float: left; marja de-dreapta: 20px;  .container.one-half.last, .container .one-third.last, .container .one-fourth.last, .container .two-thirds.last, .container .three-fourths.last margin-right: 0;  .container.one-jumătate width: 460px;  .container. un-al treilea width: 300px;  .container. un-al patrulea width: 220px;  .container. două treimi width: 620px;  .container.three-fourths width: 700px;  / * ------------------------------------------- * / / * Grilă responsabilă - / * 1. Tablet / * 2. Portret mobil / * 3. Peisaj mobil / * ---------------------------- --------------- * / numai pentru ecranul @media și (min-width: 768px) și (max-width: 959px) .container width: 748px;  .container. o jumătate width: 364px;  .container. un-al treilea width: 236px;  .container. un-al patrulea width: 172px;  .container. două treimi width: 492px;  .container.three-fourths width: 508px;  numai în ecranul @media și (max-width: 767px) .container width: 300px;  .container.one-jumătate, .container. un-al treilea, .container. un-al patrulea, .container. două treimi, .container. trei-patru (lățime: 300px; marja de-dreapta: 0;  numai în ecranul @media și (min-width: 480px) și (max-width: 767px) .container width: 420px;  .container.one-jumătate, .container. un-al treilea, .container. un-al patrulea, .container. două treimi, .container .three-fourths width: 420px; marja de-dreapta: 0; 

Pasul 2: Înregistrarea CSS-ului nostru în WordPress

Înainte de a putea sari în a face orice coduri scurte, va trebui să înregistrăm fișierul CSS pe care tocmai l-am creat. Vom face asta folosind wp_register_style și wp_enqueue_style. Asigurați-vă că plasați acest lucru în interiorul dvs. functions.php sau un alt dosar care este legat prin intermediul functions.php fişier. De asemenea, am mers în față și am înfășurat acest lucru într-o funcție, dar acest lucru nu este necesar. Odată ce am sunat și am înregistrat fișierul CSS, va trebui să-l cuprind folosind ADD_ACTION funcţie.

• wp_register_style
• wp_enqueue_style
• ADD_ACTION

 dacă (! function_exists ('register_css')) funcția register_css () wp_register_style ('custom-grid', get_template_directory_uri () ./css/grid.css '); wp_enqueue_style ( 'custom-grid');  add_action ('wp_enqueue_scripts', 'register_css'); 

Pasul 3: Începeți să creați codurile scurte

Pentru a păstra totul curat, vom crea un nou fișier numit shortcodes.php pentru a ne păstra codurile scurte separate de orice alte funcții, va trebui, de asemenea, să conectăm acest lucru în cadrul nostru functions.php fişier.

 // Include codurile scurte include 'shortcodes.php';

Pasul 4: API-ul Shortcode

Shortcode API este genial, permite utilizatorilor să creeze lucruri nesfârșite cu acesta. Puteți transfera atribute și valori prin aceasta. Dacă doriți să citiți mai multe despre API-ul Shortcode, accesați pagina API Shortcode în Codul WordPress. Pentru a vedea ce coduri scurte pot face, vom arăta două căi pentru acest lucru.

Pasul 5: Calea scurtă 1

Deoarece aceasta este o rețea, va avea coloane (evident), dar când ajunge la ultima coloană, va trebui să definim ultima coloană din cauza modului în care a fost codificată grila personalizată. De exemplu, dacă am avea o zonă principală de două treimi și o bara laterală de o treime. Bara laterală va trebui definită ca ultima din rând, astfel încât vom adăuga o clasă de ultimul la el.

Acum vom începe să ne creăm codul scurt, vom începe cu un scurt cod de bază pentru o jumătate de coloană. Începem cu crearea unei funcții cu numele scurtcodei. Apoi vom trece două argumente $ ATTS și conținut $. Modul de funcționare a codurilor scurte este foarte simplu, dacă creați un scurt cod ca acesta, tot ce trebuie să faceți este să returnați ceva. Tot ce vom întoarce este a div cu clasa de jumătate, împreună cu conținutul din interior. Ultimul lucru pe care trebuie să-l faceți este să activați codul scurt pentru a fi utilizat în cadrul temelor dvs. WordPress. Acest lucru se face prin add_shortcode funcţie. Această funcție acceptă doi parametri, numele utilizat pentru a accesa codul scurt și numele funcției codului scurt. Am folosit "o jumatate"pentru ca numele să aibă acces la codul scurt, pentru a putea folosi acest lucru în cadrul editorului tastând [o jumatate].

 funcția one_half ($ atts, $ content = null) return '
". do_shortcode (conținut $). '
„;  add_shortcode ('one_half', 'one_half');

Acum, dacă privim înapoi, am vorbit despre definirea ultimei coloane. Pentru această rută vom crea doar un alt shortcode, dar în loc de [o jumatate], vom folosi [One_half_last] în timp ce modificați numele clasei

 funcția one_half_last ($ atts, $ content = null) return '
". do_shortcode (conținut $). '
„;  add_shortcode ('one_half_last', 'one_half_last');

 funcția one_half ($ atts, $ content = null) extract (shortcode_atts (array (last) => "), $ atts) altfel $ position = ";  întoarcere '
". do_shortcode (conținut $). '
„;  add_shortcode ('one_half', 'one_half');