Share
Nu hebben we aangepaste menu's behandeld, laten we ons concentreren op dynamische zijbalken en hoe ze binnen een thema kunnen worden gebruikt.
Wat is een dynamische zijbalk precies? Er zijn 3 delen van de naamgeving die we moeten behandelen in termen van dit onderwerp.
Ten eerste "dynamisch". Dynamisch verwijst naar het feit dat het zijbalkgebied kan worden bestuurd vanuit het beheerdersdashboard en eenvoudig kan worden gewijzigd. Verder kan de inhoud worden getrokken uit constant bijgewerkte WordPress-informatie zoals berichten, opmerkingen en andere regelmatig bijgewerkte inhoudstypen, zodat elke keer dat een nieuw bericht wordt toegevoegd, het kan worden getrokken in een recent berichtenblok met inhoud of widget (we zullen handelen met de term widget een beetje.).
Ten tweede verwijst 'zijbalk' naar een inhoudsgebied dat niet noodzakelijkerwijs aan de zijkant van de lay-out hoeft te worden geplaatst (vreemd dat weet ik). De term is overgenomen van de begintijd van layouts van blogstijlen waarbij widgets vrijwel altijd naast elkaar stonden. Het zijbalkgebied bevat extra inhoudsblokken of gegenereerde gegevens van plug-ins die worden weergegeven in de vorm van "widgets" meestal aan de zijkant, in de koptekst of in de voettekst van WordPress-thema's, maar kan ook op elke gewenste manier in de lay-out van het thema worden geplaatst.
Een widget is een klein inhoudsblok dat over het algemeen koppelingen of inhoud bevat die zijn gekoppeld aan pagina's of berichten. Deze kunnen lijsten met berichten, opmerkingen, tags, categorieën en een hele reeks andere contentverzamelingen bevatten, sommige ingebouwd en sommige gegenereerd door extra plug-ins.
Widgets kunnen worden toegevoegd aan "widget klaar" -thema's via Vormgeving -> Widgets in het beheerdashboard met behulp van het ingebouwde beheergebied van de widget voor slepen en neerzetten. Thema's ondersteunen widgets niet automatisch en moeten widget-klaar worden gemaakt door een speciale functie te registreren, op een vergelijkbare manier als waarop we de aangepaste menu's hebben geregistreerd.
Voordat we sidebars in een WordPress-thema registreren, zien we bij het bezoeken van Uiterlijk -> Widgets het volgende.
Net zoals bij de aangepaste menu's in onze vorige les, heeft uw thema een function.php-bestand nodig dat de zijbalken registreert, zodat de dynamische zijbalkfunctie in uw thema kan werken. Het simpele functions.php bestand zou de volgende code moeten bevatten:
Let goed op, zoals eerder vermeld, om geen spaties achter te laten na de code in je functiesbestand, omdat dit soms problemen oplevert die kunnen leiden tot witte schermen bij het bekijken van je thema aan de voorkant.
Het enige aspect van deze code dat nodig zou zijn om in het begin te bewerken, zou de hoeveelheid dynamische zijbalkgebieden zijn die geregistreerd moet worden in "register_sidebars (1);". We zullen in een klein beetje omgaan met benoemde zijbalken. Voor nu heeft onze code hierboven 2 sidebars geregistreerd die alleen op basis van hun nummer zijn geïdentificeerd.
Als u 5 dynamische zijbalkgebieden in uw thema wilt hebben, verandert het cijfer in 5 - "register_sidebars (5);"In dat geval zou u 5 dynamische zijbalkgebieden hebben met de nummers 1 - 5.
De functie heeft een "if" -instructie of een voorwaardelijk argument dat controleert of de functie register_sidebars bestaat in deze versie van WordPress. Als het antwoord met een ja komt, wordt de functie register_sidebars uitgevoerd. Gezien het feit dat sidebars zijn ondersteund vanaf versie 2.2 van WordPress, is het waarschijnlijk onnodig om je zorgen te maken over dit aspect van de code.
Zodra uw functiesbestand gereed is, kunt u doorgaan widgets in te voegen in de nieuwe zijbalkgebieden die we hebben gemaakt.
Je kunt nu widgets aan de linkerkant van het gedeelte "Beschikbare widgets" pakken en ze naar rechts in de zijbalk 1 of 2 plaatsen.
Zodra uw functiesbestand klaar is, kunt u doorgaan met het invoegen van de dynamische zijbalkcode in de gebieden van uw thema waar u dynamisch WordPress-widgets wilt toevoegen. De onderstaande code is de meest eenvoudige vorm van de plaatsingscode van de zijbalk. Het enige aspect dat moet worden aangepast, is het nummer dat aangeeft welke genummerde zijbalk u op de specifieke locatie wilt plaatsen.
We plaatsen deze code in onze linkerzijbalk
De bovenstaande code moet voldoende zijn om de geregistreerde zijbalk in staat te stellen widget-inhoud binnen het thema weer te geven. Dus we gaan door en voegen enkele widgets toe.
Wat resulteert in:
Ik moest extra CSS toevoegen om rekening te houden met de nieuw toegevoegde widgets. In wezen heb ik toegevoegd zijbalk-widget CSS van het Twenty Eleven-thema. U moet mogelijk aangepaste CSS voor uw eigen thema's schrijven, zodat ze passen in de lay-out, vormgeving en kleuren voor uw thema. Ik plaats de CSS aan het einde van de les.
Om ervoor te zorgen dat onze zijbalk nog steeds iets weergeeft in gevallen waarin widgets nog niet zijn toegevoegd, of in het externe evenement dat sidebars niet hebben geregistreerd (we hopen dat niemand pre versie 2 WordPress uitvoert), moeten we de plaatsingscode uitbreiden met de volgend op. Merk op dynamic_sidebar (1) staat nog steeds in de eerste regel code!
Wat doet de bovenstaande code??
Lijn 1 van de code controleert om te zien of u zijbalken hebt geregistreerd in uw functions.php-bestand, en zo ja, welk zijbalknummer op deze locatie moet worden ingevoegd.
Lijn 2 fungeert als een standaardwidget die een lijst met de postcategorieën van uw site weergeeft als er geen dynamische widgets zijn toegevoegd. Zodra een dynamische widget aan uw zijbalk is toegevoegd in uw dashboard, wordt de standaardwidget vervangen door de dynamische widget.
Regel 3 eindigt het if-argument waarmee regel 1 is gestart. In PHP moeten argumenten zoals if, wat een voorwaardelijke verklaring is, ook worden beëindigd, dus het argument heeft geen invloed op de php-code die volgt. Het if met het endif niet sluiten; zal je thema doorbreken!
Het enige deel van de 3 regels dynamische zijbalkcode dat echt moet worden bewerkt, is het nummer, om aan te geven welke specifieke genummerde zijbalk op deze specifieke locatie wordt ingevoegd.
Vanuit de WordPress-documentatie (The Codex) zijn dit enkele functies die kunnen worden gebruikt om widgets in de zijbalkgebieden te "coderen" en om als standaardwidgets op te nemen in de plaatsingscode van de zijbalk.
wp_list_authors () - Toont een lijst met auteurs van de sites (gebruikers) en als de gebruiker berichten heeft geschreven, wordt de naam van de auteur weergegeven als een link naar zijn berichten.
wp_list_categories () - Geeft een lijst met categorieën weer als koppelingen. Wanneer op een categorielink wordt geklikt, worden alle berichten in die categorie weergegeven
wp_dropdown_categories () - Hiermee geeft u de HTML-vervolgkeuzelijst met categorieën weer of haalt u deze op.
wp_tag_cloud () - Geeft een lijst met tags weer in een zogenoemde 'tag cloud', waarbij de grootte van elke tag wordt bepaald door het aantal keer dat die tag aan berichten is toegewezen.
wp_list_pages () - Geeft een lijst met WordPress-pagina's weer als koppelingen.
wp_list_bookmarks () - Geeft bladwijzers weer die zijn gevonden in het venster Beheer -> Koppelingen.
get_comments () - Lijst opmerkingen op basis van nummer, volgorde en andere parameters.
wp_get_archives () - Deze functie geeft een op datum gebaseerde archieflijst weer.
Deze functies kunnen ook overal in het thema worden gebruikt om lijsten met verschillende inhoud van de site te genereren om gebruikers te helpen gemakkelijker inhoud te vinden.
We kunnen dan deze plaatsingscode gebruiken om onze zijbalk nummer 2 in het rechterdeel van ons thema te plaatsen.
Categorieën
We kunnen ook andere HTML-inhoud opnemen als standaard widgetinhoud die moet worden weergegeven voordat dynamische widgets worden toegevoegd via de admin-widgets. Dit kan een bericht bevatten om site-eigenaren eraan te herinneren dat ze fysiek widgets toevoegen zodra ze het nieuwe thema hebben geactiveerd.
Geen widgets toegevoegd
Meld u aan en voeg enkele widgets toe aan deze zijbalk
Zoals we hieronder kunnen zien, hebben we de plaatsingscode van de zijbalk ingevoegd in de standaardinvoer van widgets zoals geïllustreerd in de linkerzijbalk of andere HTML-inhoud zoals geïllustreerd in de rechterzijbalk. Dit zal verschijnen zolang er geen dynamische widgets zijn toegevoegd via het dashboard van de widgets. Zodra dynamische widgets zijn toegevoegd, worden deze standaardinhoud automatisch vervangen.
Om nu een aantal dynamische widgets te testen, hebben we de volgende 2 dynamische widgets toegevoegd:
Welke resultaten in de volgende verschijning.
Momenteel hebben we twee plaatsingscodes met verschillende standaardcontent, maar trekken we hetzelfde zijbalkgebied naar zowel de linker- als de rechterkant van ons thema. Om dit te verhelpen, veranderen we de plaatsingscode van de zijbalk in de rechterzijbalk om zijbalk nummer 2 in plaats van zijbalk 1 als volgt te plaatsen. Zoals u kunt zien, hoeven we alleen het nummer te wijzigen naar de genummerde zijbalk die we willen plaatsen.
Geen widgets toegevoegd
Meld u aan en voeg enkele widgets toe aan deze zijbalk
We kunnen onze linker en rechter zijbalk nu onafhankelijk beheren.
Nadat u een bepaald aantal zijbalken aan uw thema hebt toegevoegd, merkt u snel dat het nodig is om namen te hebben in plaats van alleen cijfers. Dit helpt u herinneren aan welke regio's van uw pagina of templates de specifieke zijbalk is geplaatst.
Om benoemde zijbalken te registreren, moet de volgende code worden gebruikt om de zijbalken in uw functions.php-bestand te registreren:
Het enige verschil in termen van wat hier wordt geregistreerd, is momenteel de naam van de zijbalk. Er zijn een aantal parameters voor het verder aanpassen van de HTML-uitvoer van sidebar-widgets als volgt:
Bron: register_sidebar
Het gebruik van sommige hiervan in matrixindeling resulteert in de volgende codestructuur.
'Left Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Dit resulteert in de volgende HTML-uitvoer.
We kunnen de HTML-wrappers voor de widgetcontainer en de titel wijzigen met andere HTML, klassen, id's, enzovoort.
Verder, om meer dan één Dynamic Sidebar-gebied te registreren, dupliceren we de register_sidebar gebied van de code samen met zijn reeks parameters zo vaak als nodig is om extra zijbalken te registreren.
'Left Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',));
register_sidebar (array ('name' => 'Right Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Met deze extra parameters kunnen we de HTML-uitvoer gemakkelijker regelen, zodat we de structuur kunnen aanpassen die we nodig hebben voor de styling die we proberen te bereiken. We zullen de bovenstaande code gebruiken om onze genummerde zijbalken te vervangen door benoemde.
Het is belangrijk om te weten dat widgets mogelijk verkeerd kunnen worden toegewezen door WordPress wanneer zijregisters worden gewijzigd op de manier die ik zojuist heb gedaan of wanneer extra sidebars worden toegevoegd, vooral voor thema's die op live websites worden uitgevoerd.
WordPress probeert over het algemeen widgets in zijbalken te houden op basis van hun volgorde, dus als een zijbalkgebied wordt verwijderd of toegevoegd, kan WordPress uw bestaande widgets opnieuw toewijzen aan zijbalkgebieden die overeenkomen met de vorige zijbalkbestelling. In ons geval is dit op dit moment geen probleem, omdat we nog maar 2 sidebars hebben, dus onze widgets blijven waar ze waren.
Op dit moment hebben we de namen in onze registratiecode gewijzigd, omdat we een eenvoudige 2 sidebar-opstelling hebben, maar WordPress kan nog steeds onze benoemde zijbalken in ons thema plaatsen op basis van hun bestelling. We moeten echter onze plaatsingscode voor de zijbalk aanpassen om de namen weer te geven die we hebben gemaakt om mogelijke problemen in de toekomst te voorkomen.
Het plaatsen van benoemde zijbalken vereist in wezen het veranderen van het nummer, in onze plaatsingscode, naar de naam van de zijbalk. Dus met de allereerste plaatsingscode waar we mee begonnen, dat is de eenvoudigste:
De naam die we gebruiken moet identiek zijn aan de naam die we in de zijbalk krijgen in onze registratiecode.
In termen van de meer uitgebreide plaatsingscode die we voor onze genummerde zijbalken hebben gebruikt:
Geen widgets toegevoegd
Meld u aan en voeg enkele widgets toe aan deze zijbalk
Met behulp van de HTML-uitvoer gegenereerd door de registratiecode, kunnen we nu onze zijbalkelementen naar hartelust stylen.
De onderstaande link geeft een overzicht van enkele essentiële zijbalk / widget-CSS-elementen die we in overweging moeten nemen bij het voorbereiden van thema's voor openbare publicatie. Dit is zo dat gebruikers die de meest algemene widgets toevoegen, deze vooraf gestyled hebben om overeen te komen met de look & lay-out van het thema.
WordPress Standaard CSS-stijlen - Jeff Star, DigWP
Ga nu verder en widgetize!
Accentsconagua