15 Do’s en don’ts van effectieve WordPress-thema’s

Vandaag wil ik enkele van de do’s en don’ts van WordPress-thema’s bespreken. Ongeacht of u een WordPress-thema voor uzelf bouwt of als u er een bouwt voor release zodat anderen het kunnen gebruiken, u moet deze do’s en don’ts zo goed mogelijk volgen.


1. Gebruik geen volledige URL’s in uw thema’s

Wanneer u uw thema’s bouwt, kunnen er momenten zijn dat afbeeldingen worden gebruikt, voor social media-pictogrammen of RSS-feedpictogrammen, en tijdens deze punten in uw codering wilt u misschien de volledige url-code coderen (dwz: / wp-content /themes/your-theme-name/images/image.jpg) maar dit veroorzaakt fouten in de website wanneer de persoon die uw thema gebruikt de naam van de themamap verandert.

De juiste codes om te gebruiken om de volledige URL’s dynamisch op te halen, staan ​​hieronder.

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

2. Gebruik zoveel mogelijk de sjabloontags

WordPress doet geweldig werk door alle sjabloontags die u kunt gebruiken op te maken, dus doe uzelf een plezier (evenals de rest van de mensen die uw thema’s kunnen gebruiken) en leer de WordPress-sjabloontags – gebruik ze dan zoveel mogelijk. Door sjabloontags te gebruiken, kunt u ervoor zorgen dat uw thema’s niet breken of fouten veroorzaken wanneer de eindgebruiker deze instelt en laat werken.

3. Vergeet de vervolgkeuzecodes voor navigatie niet

Wanneer u uw WordPress-thema aan het bouwen bent, is een van de items die over het hoofd worden gezien de vervolgkeuzecodes voor uw navigatie. Natuurlijk, voor sommige thema’s is de navigatie mogelijk ingesteld om de ul’s op meerdere niveaus niet te gebruiken, waardoor alles in één rij wordt bewaard, maar hoe zit het met degenen onder ons die meerdere onderliggende pagina’s hebben voor elke hoofdouderpagina?

Daar is een oplossing voor. U kunt enkele van de onderstaande tutorials bekijken over het coderen van vervolgkeuzemenu’s met meerdere niveaus.

4. Maak uw thema-widget gereed

Naar mijn mening is er als eindgebruiker niets erger dan het implementeren van een thema en het voorbereiden om alles in te stellen, alleen om te merken dat ik nu de taak heb om secties van mijn thema’s aan te passen door er hard informatie in te coderen. Uw zijbalken en verschillende andere plaatsen in uw thema (heeft u een voettekst met drie kolommen? Widgetize het!) Moeten zo gemakkelijk mogelijk te bewerken zijn. Het is een van de gemakkelijkste dingen die u met uw thema’s kunt doen, en de gebruikers van uw thema zullen er veel baat bij hebben.

Automattic heeft een geweldige tutorial over hoe je je thema kunt widgeteren. Bekijk het hier.

Bekijk ook zeker de widgetizing thema’s tutorial hier bij Theme Lab.

5. Laat gebruikers niet vertrouwen op talloze plug-ins om uw thema te laten werken

Als u gratis thema’s vrijgeeft of commerciële WordPress-thema’s maakt, moet u het beste met uw eindgebruikers spelen als u uw thema’s bouwt. Door uw thema’s vol te proppen met 5-10 benodigde plug-ins zullen niet alleen mensen gefrustreerd raken bij het downloaden en instellen van uw thema op hun site, het zal er ook voor zorgen dat veel mensen het helemaal niet downloaden, want laten we eerlijk zijn, mensen don geen aandachtsspanne hebben van meer dan 2-3 seconden.

Als u bijvoorbeeld paginering in uw thema gaat instellen, kunt u dit artikel gebruiken om te leren hoe u het automatisch in uw thema instelt. Cats Who Code heeft een redelijk goede tutorial over hoe paginering toe te voegen aan uw thema zonder een plug-in te hoeven activeren.

6. Laat de zoekterm zien op de zoekresultatenpagina

Om de een of andere reden is dit een vaak over het hoofd geziene tip die u in uw thema’s kunt (en moet) implementeren. Het is een eenvoudige code van één regel waarmee uw thema de bezoeker eraan kan herinneren waarnaar hij zojuist heeft gezocht. Het lijkt misschien triviaal, maar het is nuttig, dus als de resultaten nul berichten opleveren, weet de bezoeker de exacte zin waarnaar ze hebben gezocht en kan vervolgens een andere zoekterm typen.

Hieronder vindt u de code die wordt gebruikt om uw huidige titel “Zoekresultaten” in uw thema te vervangen.

Zoekresultaten voor <?php the_search_query () ?>

7. Maak uw 404-foutpagina’s niet halfslachtig

In plaats van uw 404-pagina gewoon te verlaten om “404 – pagina niet gevonden” te zeggen, waarom zou u uw bezoekers dan niet wat meer opties geven? Het toevoegen van een categorielijst, recente berichten, populaire berichten, een zoekvak en (als u geld wilt verdienen met uw 404-pagina) kan een advertentie uw 404-pagina wat pit geven in vergelijking met de saaie, nutteloze die te vinden zijn in de meeste WordPress-thema’s.

Als je op zoek bent naar inspiratie voor 404 pagina’s, dan heeft Smashing Magazine een geweldige showcase van 404 pagina’s van internet dat de moeite van het bekijken waard is.

8. Zorg ervoor dat u alle basisbestanden in uw themamap heeft

Wanneer u een WordPress-thema aan het bouwen bent, is het essentieel om ervoor te zorgen dat u het vanaf het begin zo veel mogelijk kunt aanpassen. Beginnen met een combinatie van index.php, header.php, sidebar.php en footer.php lijkt misschien een goed idee voor de minimalisten die er zijn, maar ik zou willen voorstellen om te beginnen met alle basisprincipes hieronder om te geven je hebt wat meer controle over wat er wordt weergegeven – wanneer, waar en hoe.

  • style.css
  • header.php
  • index.php
  • zijbalk.php
  • footer.php
  • single.php
  • page.php
  • comments.php
  • 404.php
  • functies.php
  • archive.php
  • zoekformulier.php
  • search.php

Voor meer informatie over deze sjabloonbestanden en wat ze doen, bekijk de sjabloonhiërarchie pagina op WordPress.org.

9. Vergeet de RSS-integratie niet

Wanneer u uw blog aan het bouwen bent, is een van de items die de meeste aandacht van mensen trekt de mogelijkheid om zich op uw blog te abonneren via een RSS-lezer. Dus, in plaats van van uw thema-gebruikers te eisen dat ze deze informatie zelf toevoegen, waarom zou u dan niet de stappen nemen om een ​​abonnement op rss-box toe te voegen, net zoals u het zoekvak doet. Voeg een RSS-knop toe, abonneer u via e-mail en u kunt zelfs het aantal abonnees in tekst toevoegen door dit stukje code toe te voegen aan uw thema waar u het wilt weergeven (vervang “feedburner-id” door uw eigen FeedBurner ID – als je dit thema in het wild vrijgeeft, kijk dan eens naar # 11 in onze lijst en zorg ervoor dat je dit als optie hebt).

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

// Initialiseer de Curl-sessie
$ ch = curl_init ();

// Stel curl in om de gegevens terug te sturen in plaats van ze af te drukken naar de browser.
curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1);

// Stel de URL in
curl_setopt ($ ch, CURLOPT_URL, $ whaturl);

// Voer de ophaalactie uit
$ data = curl_exec ($ ch);

// Sluit de verbinding
curl_close ($ ch);
$ xml = nieuwe SimpleXMLElement ($ data);
$ fb = $ xml->voeden->vermelding [‘circulatie’];
echo $ fb;
// einde coole feedburner tellen
?>

10. Voeg CSS-stijlen toe voor threaded reacties

Als je een thema bouwt, moet je altijd voorbereid zijn op threaded comments. Het is een functie in WordPress die veel blogs gebruiken om interactie op te bouwen in hun opmerkingengedeelte. Het is dus een goed idee om uw stylesheet voor threaded comments voor te bereiden. Chris heeft een geweldige post op CSS-codes voor de standaard CSS-klassen die WordPress uitspuugt in hun opmerkingengedeelte, door uw thema een gestileerde commentaarsectie te geven zonder het comments.php-bestand aan te raken.

11. Geef geen thema vrij zonder een optiepaneel

Sommige mensen zijn het hier misschien niet mee eens, maar ik denk dat het een onderdeel is van de natuurlijke voortgang van WordPress-thema’s. Als uw thema geen WordPress-optiepaneel heeft met de mogelijkheid om items in uw thema te bewerken, aan te passen en te wijzigen zonder codes te hoeven bewerken, doet u iets verkeerd.

Als u niet zeker weet hoe u uw eigen paneel met thema-opties moet maken, laten de onderstaande links zien hoe u dit moet doen.

12. Zorg ervoor dat uw thema’s out of the box werken

Dit gaat hand in hand met # 5 op onze lijst – u moet er altijd voor zorgen dat uw thema’s direct uit de doos werken. Sommige thema’s die ik heb gezien, vereisen 5-6 stappen voordat het thema op de site kan worden gebruikt, inclusief, maar niet beperkt tot, activering van plug-ins en bewerken / opslaan van het thema-optiepaneel. Als het thema bepaalde dingen vereist, zorg er dan voor dat er een standaard back-upitem wordt gebruikt.

Zorg er bijvoorbeeld voor dat u in uw paneel met thema-opties dat u bouwt en / of gebruikt, standaardinformatie in elke sectie bevat, zodat er dingen verschijnen, ongeacht of de eindgebruiker ze heeft bijgewerkt of niet. Hetzelfde geldt voor plug-ins, als u een plug-in voor WordPress-paginering in uw thema gebruikt, waarom zou u deze dan niet coderen zodat het thema terugkeert naar de vorige / volgende links als de plug-in niet actief is.

13. Maak geen overmatig gebruik van aangepaste velden

Ja, de meeste WordPress-thema’s in tijdschriftstijl van een paar jaar geleden werden gebouwd met gebruik van aangepaste velden bij elke draai, maar de meeste mensen zullen niet 3, 4 of 5 aangepaste velden voor elk bericht willen invullen. Maak het hen dus gemakkelijker. Als je een afbeelding van het bericht op de startpagina van je thema wilt laten zien, neem dan dit handige stukje code en voeg het toe aan je thema’s functions.php-bestand en het zal automatisch de eerste afbeelding van het bericht plaatsen, zonder de noodzaak van een aangepast veld.

// Haal de URL op van de eerste afbeelding in een bericht
functie catch_that_image () {
wereldwijde $ post, $ posts;
$ first_img = ”;
ob_start ();
ob_end_clean ();
$ output = preg_match_all (‘// i’, $ post->post_content, $ matches);
$ first_img = $ komt overeen met [1] [0];

// geen afbeelding gevonden, in plaats daarvan de standaardafbeelding weergeven
if (leeg ($ first_img)) {
$ first_img = "/images/default.jpg";
}
retourneer $ first_img;
}

Zodra je die code hebt toegevoegd, hoef je alleen maar toe te voegen <?php echo catch_that_image (); ?> in de bestanden van je thema, waar je maar wilt dat de afbeelding wordt weergegeven.

Dankzij de goede oude WordPress ondersteuningsforums voor deze handige tip.

14. Doe SEO uw tag

Een geweldige manier om ervoor te zorgen dat uw thema zo SEO-mogelijk is, is door de standaardtag in uw header.php-bestand voor thema’s te verwijderen en deze te vervangen door de onderstaande codes. Het geeft de titels van uw thema een beetje meer pit en helpt de SEO-inspanningen die uw thema’s gebruikers in de praktijk willen brengen – allemaal zonder dat ze iets hoeven aan te raken.

<?php als (is_home ()) { ?><? bloginfo (‘naam’); ?> | <?php bloginfo (‘beschrijving’); ?><?php} ?>
<?php if (is_search ()) { ?>Zoekresultaten voor <?php / * Aantal zoekopdrachten * / $ allsearch = &nieuwe WP_Query ("s = $ s&showposts = -1"); $ key = wp_specialchars ($ s, 1); $ count = $ allsearch->post_count; _e (”); echo $ -toets; _e (‘â € ”’); echo $ count. ”; _e (‘artikelen’); wp_reset_query (); ?><?php} ?>
<?php if (is_404 ()) { ?><? bloginfo (‘naam’); ?> | 404 Niets gevonden<?php} ?>
<?php if (is_author ()) { ?><? bloginfo (‘naam’); ?> | auteur Archief<?php} ?>
<?php if (is_single ()) { ?><?php wp_title (”); ?> | <?php $ category = get_the_category (); echo $ categorie [0]->cat_name; | <?php bloginfo (‘naam’); ?><?php} ?>
<?php if (is_page ()) { ?><? bloginfo (‘naam’); ?> | <?php $ category = get_the_category (); echo $ categorie [0]->cat_name; ?>|<?php wp_title (”); ?><?php} ?>
<?php if (is_category ()) { ?><?php single_cat_title (); ?> | <?php $ category = get_the_category (); echo $ categorie [0]->categorie beschrijving; ?> | <? bloginfo (‘naam’); ?><?php} ?>
<?php if (is_month ()) { ?><? bloginfo (‘naam’); ?> | Archief | <?php the_time (‘F, Y’); ?><?php} ?>
<?php als (is_day ()) { ?><? bloginfo (‘naam’); ?> | Archief | <?php the_time (‘F j, Y’); ?><?php} ?>
<?php if (function_exists (‘is_tag’)) {if (is_tag ()) { ?><?php single_tag_title ("", waar); }} ?> | <? bloginfo (‘naam’); ?>

15. Vergeet broodkruimels niet

Als een extra stukje navigatie in uw thema’s, moeten broodkruimels (naar mijn mening) zoveel mogelijk worden gebruikt. Het is niet alleen goed voor SEO-doeleinden, maar het laat de bezoeker ook veel sneller door uw site navigeren. Er zijn WordPress-plug-ins voor broodkruimels, maar dankzij Cats Who Code, we weten nu hoe we een breadcrumb-functie kunnen toevoegen aan onze WordPress-thema’s.

Voeg eerst de onderstaande codes toe aan uw thema’s functions.php-bestand (een beetje aangepast aan het originele Cats Who Code-bericht, hierboven gelinkt).

function the_breadcrumb () {
echo ‘

    ‘;
    if (! is_home ()) {
    echo ‘
  • ‘;
    echo ‘Home’;
    echo "
  • ";
    if (is_category () || is_single ()) {
    echo ‘

  • ‘;
    the_category (‘
  • ‘);
    if (is_single ()) {
    echo "
  • ";
    de titel();
    echo ‘
  • ‘;
    }
    } elseif (is_page ()) {
    echo ‘

  • ‘;
    echo the_title ();
    echo ‘
  • ‘;
    }
    }
    elseif (is_tag ()) {single_tag_title ();}
    elseif (is_day ()) {echo"

  • Archief voor "; the_time (‘F jS, Y’); echo’
  • ‘;}
    elseif (is_month ()) {echo"

  • Archief voor "; the_time (‘F, Y’); echo’
  • ‘;}
    elseif (is_year ()) {echo"

  • Archief voor "; the_time (‘Y’); echo’
  • ‘;}
    elseif (is_author ()) {echo"

  • Schrijvers archief"; echo’
  • ‘;}
    elseif (isset ($ _ GET [‘paged’]) && !leeg ($ _ GET [‘paged’])) {echo "

  • blog archieven"; echo’
  • ‘;}
    elseif (is_search ()) {echo"

  • Zoekresultaten"; echo’
  • ‘;}

    echo ‘

‘;
}

Plaats vervolgens dit stuk code waar u maar wilt dat uw broodkruimels weergeven.

<?php the_breadcrumb (); ?>

Bedankt voor het lezen van het artikel

Bedankt dat je de tijd hebt genomen om het artikel te lezen. Ik hoop dat je het leuk vond en onderweg een paar dingen leerde – ik weet dat ik dat gedaan heb. Als je het bericht leuk vond of iets toe te voegen hebt, laat het ons dan weten in de reacties.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map