Share
Toen WordPress 3.1 werd uitgebracht, werd een nieuwe functie genaamd Post-formaten geïntroduceerd, waarmee auteurs de mogelijkheid kregen om een van de negen formaten te selecteren voor hun berichten. Thema-ontwikkelaars moesten ondersteuning toevoegen om elke indeling op te nemen, evenals een aantal voorwaardelijke tags en CSS om te profiteren van wat ze te bieden hadden. Elk formaat kon aan de voorkant worden weergegeven met een andere lay-out en ontwerp, hoewel de visuele editor in de wp-admin dit niet weerspiegelde.
Voor deze zelfstudie ga ik focussen op hoe we ons thema kunnen laten citeren in het Quote-formaat, zodat de front-end lay-out en het ontwerp worden weerspiegeld bij het maken van een bericht in de visuele editor.
In totaal zijn er slechts negen post-formaten die kunnen worden ondersteund door een thema: terzijde, galerij, video-, audio, beeld, staat, link, citaat, babbelen. Je kunt meer lezen over alle postformaten die beschikbaar zijn in WordPress in Braden Keith's artikel Postformaten binnen en buiten.
Laten we eerst eens kijken of ons thema postformaten ondersteunt en editor stijlen. Het enige wat we moeten doen is het volgende opnemen in onze functions.php het dossier:
Accentsconagua
// Dit thema maakt de visuele editor met editor-style.css passend in de themastijl. add_editor_style (); // Ondersteuning toevoegen voor de quote-berichtindelingen add_theme_support ('post-formats', array ('quote')); Tip: Onthoud dat bij het toevoegen van PHP aan een bestand dit binnen de opening moet zijn en sluiten ?> tags of anders wordt het alleen weergegeven als HTML in plaats van te worden verwerkt als PHP.
Om te bepalen hoe onze Quote Post Format wordt weergegeven aan de voorkant, moeten we een bestand maken met de naam inhoud quote.php. Dit is onze paginasjabloon met citaatindelingen en deze moet in de map van ons thema worden geplaatst. Dit is de code die we moeten toevoegen aan ons nieuwe bestand:
>
Deze paginasjabloon wordt gebruikt op onze index- en archiefpagina's en wordt vaak rechtstreeks vanuit de index.php bestand met de volgende code:
Hier is een voorbeeld van hoe het Citaat-postformaat er uitziet in mijn Gridiculous-thema voor WordPress:
Om dingen eruit te laten zien zoals we willen, moeten we wat CSS toevoegen:
/ * = Offerte ---------------------------------------------- ---------------- * / .format-quote .post-content font-size: 18px; regelhoogte: 27 px; padding-links: 50px; lettertype-stijl: cursief; .format-quote p, .format-quote blockquote margin: 0; .format-quote: before font-family: Georgia, serif; kleur: # 999; weergave: blok; lettergrootte: 100 px; breedte: 50px; inhoud: '\ 201C'; hoogte: 0; top: -40px; positie: relatief; .format-quote blockquote border: 0; opvulling: 0; lettergrootte: 18px; kleur: # 555; citeer text-align: right; lettertype: normaal; weergave: blok; margin-bottom: 10px; cite: before content: '\ 2013 \ 00A0';
De bovenstaande CSS moet worden opgenomen in onze thema's style.css bestand, maar we moeten ook een maken editor-style.css bestand en voeg het toe aan ons thema. Dit stylesheet is wat gebruikt zal worden wanneer we onze post bekijken in de visuele editor.
Bijna elk van de geweldige effecten die je ervaart in de WordPress-beheerder, is gemaakt met jQuery. Omdat het al is opgenomen op de beheerpagina, laten we er gewoon van af gaan om onze visuele editor te laten werken met onze stijlen voor de opmaak van berichtindelingen.
Als een / JS map bestaat nog niet in uw thema, maak er een aan en voeg een nieuw JavaScript-bestand toe met de naam editor-stijlen-post-format.js. Nadat het bestand is gemaakt, opent u het in uw favoriete teksteditor en voegt u het volgende toe:
(functie ($) $ (venster) .load (function () var init_post_format = $ ('# post-formats-select') .find ('.post-format: checked') .val (); add_post_format ( init_post_format);); $ ('# post-formats-select') .find ('.post-format') .change (function () var post_format = $ (this) .val (); add_post_format (post_format) ;); function add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; if (frames ['content_ifr']) $ ('html', frames ['content_ifr']. document). removeClass (). addClass ('format-' + post_format);) (jQuery); Als ons jQuery-script gereed is, moeten we het in wachtrij plaatsen zodat het daadwerkelijk wordt weergegeven wanneer we door onze beheerder navigeren. Hier is nog een klein codeblokje dat we aan onze moeten toevoegen functions.php het dossier:
add_action ('admin_enqueue_scripts', 'editor_style_admin_script'); function editor_style_admin_script ($ hook) if ('post-new.php' == $ hook || 'post.php' == $ hook) wp_enqueue_script ('editor_styles_post_format_js', get_template_directory_uri (). '/ js / editor-styles- post-format.js ', true, array (' jquery '),' 1.0.0 '); Met alles op zijn plaats, elke keer dat we een berichtindeling selecteren in het berichtbewerkingsscherm in onze beheerder, wordt een klasse aan de visuele editor toegevoegd, vergelijkbaar met de manier waarop deze aan de voorkant is toegevoegd, en kunnen we een voorbeeld bekijken van hoe onze post wordt weergegeven zal er uitzien zoals we het creëren. We moeten er alleen voor zorgen dat de volgende HTML wordt gebruikt bij het maken van een bericht, zodat onze CSS correct werkt.
Slechts één ding is onmogelijk voor God: om enig gevoel te vinden in de auteursrechtwetgeving op de planeet. Mark Twain
Er zijn een paar stappen bij betrokken, maar uiteindelijk is het niet zo ingewikkeld om dingen op zijn plaats te zetten om onze visuele editor met postformaten te laten werken. Gelukkig bevatten veel thema's al de meeste van deze elementen, dus misschien hoeven we alleen het nieuwe JavaScript-bestand te maken en in te checken. Een dezer dagen zal misschien zelfs een patch in WordPress worden gemaakt, zodat deze functionaliteit deel gaat uitmaken van de kern.
Als u opmerkingen of feedback heeft over iets dat u hierboven hebt gelezen, aarzel dan niet om het hieronder te bespreken.
