15 Lucruri de făcut și de evitat în crearea de teme WordPress eficiente

Astăzi vreau să trec în revistă câteva dintre lucrurile de făcut și de evitat în crearea temelor WordPress. Indiferent dacă construiești o temă WordPress pentru tine sau dacă o construiești pentru lansare, astfel încât alții să o poată folosi, ar trebui să urmezi aceste recomandări cât mai îndeaproape posibil.

1. Nu codifica direct URL-uri complete în temele tale

Când îți construiești temele, pot exista momente în care sunt folosite imagini, pentru pictogramele rețelelor sociale sau pictogramele fluxurilor RSS, iar în aceste puncte ale codării tale, s-ar putea să vrei să codifici URL-ul complet (adică: /wp-content/themes/numele-temei-tale/images/imagine.jpg), dar acest lucru va cauza erori pe site ori de câte ori persoana care folosește tema ta schimbă numele folderului temei.

Codurile corecte de utilizat pentru a extrage URL-urile complete dinamic sunt mai jos.

<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg

2. Utilizează etichetele de șablon cât mai mult posibil

WordPress face o treabă grozavă în a prezenta toate etichetele de șablon pe care le puteți utiliza, așa că faceți-vă o favoare (precum și restului oamenilor care ar putea folosi temele dvs.) și învățați etichetele de șablon WordPress – apoi utilizați-le cât mai mult posibil. Folosind etichete de șablon, puteți asigura că temele dvs. nu se defectează sau nu cauzează erori atunci când utilizatorul final o configurează și o pune în funcțiune.

3. Nu uita codurile pentru meniurile derulante de navigare

Când îți construiești tema WordPress, un element care pare a fi trecut cu vederea sunt codurile pentru meniurile derulante ale navigării tale. Sigur, unele teme ar putea avea navigarea configurată să nu utilizeze liste ul pe mai multe niveluri, păstrând totul pe un singur rând, dar ce se întâmplă cu cei dintre noi care au pagini copil multiple pentru fiecare pagină părinte principală?

Există o soluție pentru asta. Poți consulta câteva dintre tutorialele de mai jos despre cum să codifici meniuri derulante pe mai multe niveluri.

• Cum să implementezi o bară de navigare perfectă pe mai multe niveluri
• Meniuri de navigare derulante pe mai multe niveluri: Exemple și tutoriale
• Meniuri pe mai multe niveluri cu jquery și css

4. Asigură-te că tema ta este pregătită pentru widget-uri

În opinia mea, ca utilizator final, nu există nimic mai rău decât să implementezi o temă și să te pregătești să configurezi totul, doar pentru a observa că acum mă confrunt cu sarcina de a încerca să personalizez secțiuni ale temelor mele prin codificarea informațiilor în ele. Barele laterale și diverse alte locuri din tema ta (ai un subsol cu trei coloane? widgetizează-l!) ar trebui să fie cât mai ușor de editat posibil. Este unul dintre cele mai ușoare lucruri de făcut la temele tale și va beneficia mult utilizatorii temei tale.

Automattic are un tutorial grozav despre cum să-ți transformi tema în widget. Verifică-l aici.

De asemenea, asigurați-vă că verificați tutorialul widgetizing themes aici la Theme Lab.

5. Nu faceți utilizatorii să depindă de numeroase pluginuri pentru ca tema dvs. să funcționeze

Dacă lansați teme gratuit sau creați teme comerciale pentru WordPress, ar trebui să luați în considerare interesul final al utilizatorilor dvs. atunci când construiți temele. Încărcarea temelor dvs. cu 5-10 pluginuri necesare nu numai că va frustra oamenii atunci când descarcă și configurează tema dvs. pe site-ul lor, dar va face ca mulți oameni să nu o descarce deloc, deoarece, să fim sinceri, oamenii nu au o durată de atenție mai mare de 2-3 secunde.

De exemplu, dacă veți configura paginarea în tema dvs., de ce să nu utilizați acest articol pentru a învăța cum să o configurați automat în tema dvs. Cats Who Code are un tutorial destul de bun despre cum să adăugați paginarea în tema dvs. fără a fi nevoie să activați un plugin.

6. Afișați termenul de căutare pe pagina cu rezultatele căutării

Din anumite motive, acesta este un sfat adesea trecut cu vederea pe care îl puteți (și ar trebui să îl) implementați în temele dvs. Este un cod simplu, dintr-o singură linie, care permite temei dvs. să reamintească vizitatorului ce a căutat. Poate părea trivial, dar este util, astfel încât, dacă rezultatele nu aduc niciun post, vizitatorul știe exact expresia pe care a căutat-o și poate apoi să introducă un alt termen de căutare.

Mai jos este codul utilizat pentru a înlocui titlul curent „Rezultatele căutării” din tema dvs.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. Nu faceți paginile de eroare 404 pe jumătate

În loc să lăsați pagina dvs. 404 să spună „404 – pagină negăsită”, de ce să nu oferiți vizitatorilor dvs. mai multe opțiuni? Adăugarea unei liste de categorii, postări recente, postări populare, o casetă de căutare și (dacă doriți să monetizați pagina dvs. 404) o reclamă pot oferi paginii dvs. 404 un pic de condiment față de cele plictisitoare, inutile găsite în majoritatea temelor WordPress.

Dacă sunteți în căutarea de inspirație pentru pagina 404, Smashing Magazine are o expoziție killer de pagini 404 de pe web, care merită verificată.

8. Asigură-te că ai toate fișierele de bază în directorul temei tale

Când construiești o temă WordPress, este esențial să te asiguri că o poți personaliza cât mai mult posibil de la început. Pornirea cu o combinație de fișiere index.php, header.php, sidebar.php și footer.php ar putea părea o idee bună pentru minimaliștii de acolo, dar aș sugera să începi cu toate elementele de bază de mai jos pentru a-ți oferi un pic mai mult control asupra a ceea ce este afișat – când, unde și cum.

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

Pentru mai multe informații despre aceste fișiere de șablon și ce fac ele, consultați pagina ierarhie șabloane de pe WordPress.org.

9. Nu uita integrarea RSS

Când îți construiești blogul, unul dintre elementele care atrag cel mai mult atenția oamenilor este posibilitatea de a te abona la blogul tău printr-un cititor RSS. Deci, în loc să ceri utilizatorilor temei tale să adauge singuri aceste informații, de ce să nu faci pașii pentru a adăuga o casetă de abonare la RSS, la fel cum faci cu caseta de căutare. Adaugă un buton RSS, o opțiune de abonare prin e-mail și poți chiar să adaugi numărul de abonați în text, adăugând această bucată de cod la tema ta, acolo unde dorești să fie afișată (înlocuiește „feedburner-id” cu propriul tău ID FeedBurner – dacă lansezi această temă în public, aruncă o privire la #11 din lista noastră și asigură-te că ai această opțiune).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

    //Close the connection
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. Adaugă stiluri CSS pentru comentariile în fir

Dacă construiți o temă, ar trebui să fiți întotdeauna pregătiți pentru comentarii în fir. Este o caracteristică în WordPress pe care o folosesc multe bloguri pentru a construi interacțiunea în secțiunea lor de comentarii. Deci, pregătirea foii de stil pentru comentarii în fir este o idee grozavă. Chris are o postare grozavă despre coduri CSS pentru clasele CSS implicite pe care WordPress le generează în secțiunea lor de comentarii, oferind temei dvs. o secțiune de comentarii stilizată fără a fi nevoie să atingeți fișierul comments.php.

11. Nu lansa o temă fără un panou de opțiuni

Unii oameni s-ar putea să nu fie de acord cu asta, dar cred că este parte din progresia naturală a temelor WordPress. Dacă tema ta nu rulează un fel de panou de opțiuni WordPress cu posibilitatea de a edita, personaliza și schimba elemente din tema ta fără a fi nevoie să editezi coduri, faci ceva greșit.

Dacă nu ești sigur cum să creezi propriul tău panou de opțiuni pentru temă, linkurile de mai jos îți vor arăta cum să o faci.

• Creează panouri de opțiuni personalizate cu WordPress 2.9
• Cum să creezi un panou de opțiuni WordPress mai bun

12. Asigură-te că temele tale funcționează imediat

Acest lucru merge mână în mână cu #5 de pe lista noastră – ar trebui să te asiguri întotdeauna că temele tale funcționează imediat. Unele teme pe care le-am văzut necesită 5-6 pași înainte ca tema să fie funcțională pe site, inclusiv, dar fără a se limita la, activarea plugin-urilor și editarea/salvarea panoului de opțiuni al temei. Dacă tema necesită anumite lucruri, asigură-te că există un element implicit de rezervă utilizat.

De exemplu, în panoul de opțiuni al temei pe care îl creezi și/sau îl folosești, asigură-te că există informații implicite în fiecare secțiune, astfel încât lucrurile să fie afișate, indiferent dacă utilizatorul final le-a actualizat sau nu. Același lucru este valabil și pentru plugin-uri; dacă folosești un plugin de paginare WordPress în tema ta, de ce să nu îl codezi astfel încât tema să revină la linkurile anterioare/următoare dacă plugin-ul nu este activ.

13. Nu folosi excesiv câmpurile personalizate

Da, majoritatea temelor WordPress de tip revistă de acum câțiva ani au fost construite utilizând câmpuri personalizate la fiecare pas, dar majoritatea oamenilor nu vor dori să completeze de fapt 3, 4 sau 5 câmpuri personalizate pentru fiecare postare. Deci, faceți lucrurile mai ușoare pentru ei. Dacă veți afișa o imagine din postare pe pagina principală a temei dvs., luați această bucată utilă de cod și adăugați-o în fișierul functions.php al temei dvs. și va prelua automat prima imagine a postărilor, fără a fi nevoie de un câmp personalizat.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Odată ce ai adăugat acel cod, adaugă doar <?php echo catch_that_image(); ?> în fișierele temei tale oriunde ai dori să apară imaginea.

Mulțumită vechilor forumuri de suport WordPress pentru acest sfat util.

14. Optimizează-ți eticheta <title> pentru SEO

Un mod excelent de a te asigura că tema ta este cât mai pregătită pentru SEO posibil este să elimini tag-ul <title> implicit găsit în fișierul header.php al temei tale și să-l înlocuiești cu codurile de mai jos. Va oferi titlurilor temei tale un pic mai multă forță și va ajuta eforturile SEO pe care utilizatorii temei tale vor dori să le pună în practică – totul fără a fi nevoie să atingă ceva.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. Nu uita de breadcrumbs

Ca o piesă suplimentară de navigare în temele dvs., firimiturile (în opinia mea) ar trebui utilizate cât mai mult posibil. Nu este bun doar pentru scopuri SEO, ci permite și vizitatorului să navigheze mult mai rapid pe site-ul dvs. Există pluginuri WordPress pentru firimituri, dar datorită Cats Who Code, acum știm cum să adăugăm o funcție de firimituri în temele noastre WordPress.

Mai întâi, adaugă codurile de mai jos în fișierul functions.php al temei tale (personalizat puțin față de postarea originală Cats Who Code, legată mai sus).

function the_breadcrumb() {
		echo '<ul id="crumbs">';
	if (!is_home()) {
		echo '<li><a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a></li>";
		if (is_category() || is_single()) {
			echo '<li>';
			the_category(' </li><li> ');
			if (is_single()) {
				echo "</li><li>";
				the_title();
				echo '</li>';
			}
		} elseif (is_page()) {
			echo '<li>';
			echo the_title();
			echo '</li>';
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
	
	echo '</ul>';
}

Apoi, plasează această bucată de cod oriunde dorești să apară breadcrumbs.

<?php the_breadcrumb(); ?>

Mulțumesc pentru citirea articolului

Vă mulțumesc că v-ați făcut timp să citiți articolul. Sper că v-a plăcut și ați învățat câte ceva pe parcurs – eu cu siguranță am făcut-o. Dacă v-a plăcut postarea sau aveți ceva de adăugat, anunțați-ne în comentarii.