Share
Het vrijgeven van een WordPress-thema op een marktplaats, zoals ThemeForest, waar het publiek zo groot en divers is, heeft enkele uitdagingen. U kunt een oplossing niet rechtstreeks met de klant testen. U moet van tevoren plannen voor alle edge-cases en ervoor zorgen dat uw thema zo aanpasbaar mogelijk is. Als u onervaren bent, is de kans groot dat sommige dingen helaas door de kloven glippen. Gelukkig voor jou hebben we onze welverdiende wijsheid getrokken om te voorkomen dat je dezelfde fouten herhaalt die we hebben gemaakt.
WordPress heeft de mogelijkheid om een post-wachtwoord beveiligd te maken: bezoekers moeten toegang hebben tot dit soort content nadat ze het wachtwoord hebben ingevoerd. U hoeft niets speciaals te doen met betrekking tot het bericht zelf, maar als u vergeet te controleren voordat u opmerkingen weergeeft, zien bezoekers nog steeds alle opmerkingen over het beveiligde bericht, wat het doel van het beschermen van het bericht in de eerste plaats verslaat. U kunt dit verhelpen door eenvoudig in te checken comments.php:
Er is een speciaal sjabloonbestand, attachment.php, die wordt gebruikt wanneer een bezoeker op een bijlage klikt. Bijlagen kunnen afbeeldingen, video's, muziekbestanden zijn ... wat er ook wordt ingevoegd met de bijlageknoppen op de editor:
Creëren attachment.php is niet verplicht: als de sjabloon er niet is, geeft de browser het bestand alleen weer, indien nodig met een geschikte plug-in. Ik zou zeggen dat het belangrijkste voordeel van attachment.php is dat wanneer de bezoeker besluit om bijvoorbeeld een afbeelding op volledige grootte te zien, de sitenavigatie toegankelijk blijft. U kunt ook aangepaste informatie over de bijlage weergeven. Het standaard TwentyTen-thema in WordPress 3.0 is interessant attachment.php welke beeldformaten weergeeft.
Accentsconagua
if (wp_attachment_is_image ()) echo ' | '; $ metadata = wp_get_attachment_metadata (); printf (__ ('Volledige grootte is% s pixels', 'twintigten'), sprintf ('% 3 $ s ×% 4 $ s', wp_get_attachment_url (), esc_attr (__ ('Link naar volledige afbeelding', ' twentyten ')), $ metadata [' width '], $ metadata [' height '])); Je hebt misschien gehoord van ondersteuning voor talen die van rechts naar links zijn, maar als je zelf niet zo goed bent in een van die talen, kun je je voorstellen dat het allemaal heel ingewikkeld is.
Ondersteuning voor uw talen voor talen die van rechts naar links zijn geschreven, zoals het Arabisch en het Hebreeuws, is eigenlijk vrij eenvoudig. De stijlen in rtl.css zal die in het algemeen overschrijven style.css wanneer de WP_LANG-variabele in settings.php is ingesteld op een taal van rechts naar links, bijvoorbeeld Arabisch:
define ('WP_LANG', 'ar') Jouw rtl.css heeft eerst deze verklaring nodig:
lichaam richting: rtl; unicode-bidi: embed;
De eerste woning spreekt voor zich. De tweede 'opent een extra niveau van inbedding met betrekking tot het bidirectionele algoritme' (W3C).
De rtl.css bestand hoeft niet elke stijl te dupliceren style.css, alleen de dingen die moeten veranderen bij het lezen van links naar rechts. Denk aan de weergave van de site in een spiegel: drijvers wisselen van richting (zwevend: links wordt zwevend: rechts en omgekeerd) en marges en opvulling worden omgekeerd (marge rechts: 18 px wordt marge links: 18 px, marge rechts: 0). Denk ook aan grote delen van de site: in welke richting zweeft de header? Vergeet niet alle kleine details, zoals het omkeren van de inspringingen van uw definitielijsten en blockquotes. Om een gevoel te krijgen, kun je proberen de taal te veranderen in Arabisch of Hebreeuws op sites zoals Facebook of Wikipedia, of internationale sites zoals Al Jazeera bezoeken.
Geloof het of niet, dat is alles wat er te weten valt.
Gebruik de gewenste TinyMCE-editor die bij WordPress wordt geleverd om een bestand te maken met de naam editor-style.css in je themadirectory. Het is heel eenvoudig in te vullen, omdat u alleen de typografie hoeft aan te passen aan die op het hoofdstijlblad en u zich geen zorgen hoeft te maken over de bloklay-out. TinyMCE heeft echter wat eigenaardigheden. U kunt voorkomen dat de regels te lang zijn door een eigenschap max-width in te stellen in de klasse .mceContentBody.
Als u ondersteuning voor talen van rechts naar links opneemt rtl.css, je moet ook een bestand met de naam toevoegen editor-style-rtl.css, omdat sommige eigenschappen, zoals lijstmarges en opvullingen, ook in de editor moeten worden gewijzigd.
Gepagineerde ingangen (niet te verwarren met gepagineerd lijst van vermeldingen) zijn door hun auteur gescheiden in pagina's met de Quicktag. Toegegeven, deze functie lijkt niet veel te gebruiken op de meeste WordPress-sites, maar als je vergeet je deel te doen, kunnen bezoekers niet verder lezen dan de eerste pagina. Om de volledige inhoud te kunnen lezen, moet u de tag wp_link_pages in The Loop gebruiken
wp_link_pages (array ('before' => ')pagina's: ',' na '=>'
',' next_or_number '=>' nummer ')); Voor een bericht met drie pagina's geeft dit het volgende weer:
pagina's: 1 2 3
Bezoekers kunnen vervolgens op de paginanummers klikken om het hele bericht te lezen. De volledige documentatie voor deze functie is te vinden op de WordPress codex.
Hoewel je elke mogelijke widget onder de zon niet kunt stylen, is het een goed idee om te controleren of elke widget die bij WordPress wordt geleverd, overtuigend is. Ze kunnen allemaal een optionele titel krijgen en sommige hebben verschillende verschijningen. Bijvoorbeeld de Categorie widget kan worden weergegeven als een vervolgkeuzelijst en ook meerdere niveaus van geneste categorieën of tags weergeven, dus zorg ervoor dat je geneste lijsten vormgeeft. Besteed speciale aandacht aan de kalender-pruik. Het is een tabel en u wilt over het algemeen dat de dagen in hun cellen worden gecentreerd, zodat ze worden uitgelijnd met de weekdagen in de kop. Op de eerste foto zien de getallen er enigszins misplaatst uit, terwijl ze correct zijn uitgelijnd op de tweede foto.
Uiteindelijk zal het helpen als je begint met het bedenken van goede stijlen voor de .widget klasse, omdat deze wordt toegepast op alle widgets, zelfs die van derden. Met name flexibele lay-outs, zorg ervoor dat uw widgets niet te veel rekken, want dat maakt ze er echt raar uitzien.
Reacties zijn een beetje een raadsel. Er zijn veel dingen om weer te geven (avatars, commentersnamen, reactiedata, commentaartekst, antwoordknoppen), dus je moet het een beetje ruimte geven, maar tegelijkertijd moet het de hoofdinhoud niet overschaduwen , en zou op de een of andere manier visueel anders moeten zijn. Geneste opmerkingen samen al deze problemen, want je moet ook onderscheid maken tussen antwoorden. Over het algemeen wordt dit bereikt met een marge, maar omdat je niet kunt weten hoeveel antwoorden er zijn, loop je altijd het risico dat je niet genoeg ruimte inneemt of te veel ruimte laat.
Houd er ook rekening mee dat het antwoordformulier niet alleen onderaan de pagina wordt weergegeven, maar ook in het midden van de opmerkingenreeks wanneer iemand op de antwoordknop klikt. Dus marges en opvulling moeten in beide gevallen voldoende zijn. Er is ook de link 'cancel reply' die moet worden gestileerd en gepositioneerd.
Ten slotte moet u ervoor zorgen dat de paginering van opmerkingen werkt, dat opmerkingen correct worden weergegeven, beide wanneer er maar heel weinig zijn en wanneer er veel zijn, en dat reacties met schroefdraad de grenzen van hun container niet overschrijden. Zorg ervoor dat u geen opmerkingen samenvoegt en vergeet niet de lay-out te controleren wanneer avatars zowel zijn ingeschakeld als uitgeschakeld.
wp_footer () en wp_head () telefoontje wp_footer () vlak voordat de body-tag wordt gesloten, en wp_head () vlak voor de afsluitende head-tag. Beide functies zijn actiehaken, die kunnen worden gebruikt door plugin- en thema-ontwikkelaars. Als u ze weglaat, werken sommige functies en plug-ins mogelijk niet, inclusief aangepaste headers.
Hoewel veel thema's nog steeds afhankelijk zijn van plug-ins, zoals TimThumb, WordPress, sinds 2.9, bevat de ondersteuning voor thumbnails ('featured images') uit de verpakking. Om van deze functionaliteit te profiteren, voegt u gewoon enkele regels toe functions.php:
add_theme_support ('post-thumbnails'); set_post_thumbnail_size (70, 70); De eerste regel vertelt WordPress dat uw thema miniaturen ondersteunt, terwijl de tweede de miniatuurgrootte dwingt tot 70x70px, om te voorkomen dat uw lay-out met miniaturen van verschillende grootte wordt verbroken. Bovendien kunt u het formaatwijzigingsbeleid kiezen. Het bovenstaande voorbeeld zal het formaat van de afbeelding alleen wijzigen, terwijl
set_post_thumbnail_size (70, 70, TRUE);
zal ook de afbeelding bijsnijden zodat deze in de gegeven verhouding past. U kunt ook extra miniaturen beschikbaar stellen om ze op verschillende delen van de site te gebruiken:
add_image_size ('big-thumb', 500, 500); Nu,
the_post_thumbnail ();
geeft een 70x70 miniatuur en weer
the_post_thumbnail ('big-thumb'); geeft een miniatuur van 500x500 weer.
WordPress 3.0 introduceerde de langverwachte aangepaste menu's, dus het wordt tijd om uw gebruikers te laten profiteren van deze functie. Na het registreren van thema-ondersteuning, zoals zo:
register_nav_menu ('main_nav', __ ('Hoofdnavigatiemenu', 'mytheme')); ... u kunt een aangepast menu weergeven met wp_nav_menu ():
wp_nav_menu (array ('theme_location' => 'main_nav')); Wees voorzichtig, omdat het systeem u in staat stelt om geneste elementen in te voegen, wat tot vreemde resultaten kan leiden als u niet van plan bent.
Zelfs als u dropdowns of menu's in navbar-stijl aanbiedt, is het moeilijk om elegant meer dan zoveel navigatieniveaus weer te geven. Om je lay-out te beschermen, bepaal je een niveau waaronder alle elementen hetzelfde worden weergegeven of worden lagere niveaus uitgeschakeld. Gebruik bijvoorbeeld om het display te beperken tot twee niveaus:
wp_nav_menu (array ('diepte' => 2)); Dit is een nieuwe functie in WordPress 3.0 en het is ook de gemakkelijkste om te implementeren. Het is letterlijk één regel:
add_custom_background ();
Dat is het! Gebruikers kunnen nu elke gewenste aangepaste achtergrond kiezen:
In dezelfde geest, maar met een beetje meer inspanning, kunt u toestaan de achtergrond van de sitekop en de kleur van de sitetitel te wijzigen. Deze functie werkt alleen als je begint met het definiëren van een stel constanten. Vervang 'yourwidth' en 'yourheight' door de metingen die passen bij uw thema:
define ('HEADER_TEXTCOLOR', '000'); define ('HEADER_IMAGE', get_bloginfo ('stylesheet_directory'). 'path / to / your / image'); define ('HEADER_IMAGE_WIDTH', 'yourwidth'); define ('HEADER_IMAGE_HEIGHT', 'yourheight'); Zodra dit op zijn plaats is, moet je de functie schrijven die de achtergrond van je header zal toepassen. Omdat er geen standaardmarkup voor een sitekop is, kan WordPress niet raden hoe de vereiste CSS voor u moet worden toegepast. Om bijvoorbeeld een aangepaste achtergrond aan de div toe te voegen met de 'header'-id, doet u het volgende:
U moet ook een functie maken, zeg mytheme_admin_preview_header (), om het voorbeeldvenster in de beheerder op te maken zodat het overeenkomt met het uiteindelijke resultaat. Het voorbeeldgebied heeft de #headimg-id, terwijl de sitetitel en de site-beschrijving id's van #name en #desc bevatten. Experimenteer met het voorbeeld totdat u tevreden bent. Ten slotte, om de Uiterlijk> Koptekst paneel, bel:
add_custom_image_header ('mytheme_header_image', 'mytheme_admin_preview_header'); Niet iedereen wil dat zijn blog in het Engels wordt weergegeven. Omloop elke tekenreeks die gebruikers moeten lezen met de __ () als je deze wilt vertalen, of _e () als je er ook een echo van wilt geven, zoals:
__ ('Hello', 'mytheme') _e ('Hello', 'mytheme') // Print ook de vertaalde string. Het tweede argument moet een unieke ID voor uw thema zijn, zodat verschillende vertalingen niet conflicteren.
Nadat elke tekenreeks in een vertaalfunctie is ingepakt, moet u de makepot.php script. De aanbevolen manier om dit script te verkrijgen is door Subversion te installeren en vervolgens uit te voeren:
svn co http://svn.automattic.com/WordPress-i18n/tools/trunk
U krijgt een directory met de naam 'trunk' met daarin onder andere, makepot.php.
Het script wordt als volgt uitgevoerd
php makepot.php wp-theme mytheme
mijn thema is het pad naar je themamap. Je krijgt een bestand met de naam mytheme.pot, dat klaar is om te worden gebruikt in een programma, zoals Poedit om een .po bestand met een vertaling.
Om het af te maken, moet je WordPress vertellen waar de vertalingen in je themadirectory voorkomen, bijvoorbeeld:
load_theme_textdomain ('mytheme', TEMPLATEPATH. '/ languages'); Hier is 'mytheme' de unieke identificatie voor uw thema; het tweede argument vertelt waar de vertaalbestanden zich bevinden. TEMPLATEPATH is een speciale constante gedefinieerd door WordPress die altijd verwijst naar de map van het huidige thema.
Deze is een beetje optioneel, omdat je dit aan de discretie van de gebruiker of andere ontwikkelaars wilt overlaten. U weet dat WordPress het toevoegen van aangepaste velden voor elk bericht ondersteunt. In veel thema's worden deze velden meestal helemaal niet weergegeven, tenzij ze worden gebruikt voor een speciale functie. Sommige gebruikers zijn misschien in de war, omdat ze denken dat ze aangepaste velden kunnen gebruiken om alle gewenste informatie weer te geven.
Er is een functie,
the_meta ()
te worden aangeroepen in The Loop, die alle aangepaste velden weergeeft die aan een bericht zijn gekoppeld, als een ongeordende lijst in sleutel: waardeformulier. Toegegeven, het is niet erg nuttig, maar het is misschien beter dan iemand af te vragen waarom aangepaste velden nergens worden weergegeven.
Een van de problemen bij het thematiseren van een dynamisch systeem, zoals WordPress, is dat er veel randgevallen zijn die niet vaak voorkomen, maar die het uiterlijk van de site nog steeds kunnen ruïneren als ze dat doen. Denk aan berichten met gesloten opmerkingen of met hele korte lichamen. Zorg ervoor dat er geen rare spaties in kruipen of dat elementen niet aan elkaar worden geplet omdat er iets niet wordt weergegeven. Het commentaargedeelte wordt mogelijk niet weergegeven als opmerkingen niet zijn toegestaan, of een veld voor wachtwoordinvoer kan de gebruikelijke berichtinhoud vervangen als het bericht met een wachtwoord is beveiligd.
Probeer ook de manier te passen waarop opmerkingen worden gestileerd met het hoofdgedeelte. Dit laatste punt vereist bijzondere zorg, omdat de ruimte in het commentaargebied in het algemeen beperkter is - vooral bij het gebruik van opmerkingen met schroefdraad en elk antwoord is rechts geslagen (of links, voor RTL).
WordPress.org biedt een voorbeeldinhoudsbestand dat u kunt importeren in uw WordPress-installatie, die een assortiment van testberichten, pagina's en afbeeldingen bevat.
Als u het bestand in WordPress 3.0 wilt importeren, moet u eerst de plug-in WordPress Importer installeren. Kies dan Hulpmiddelen> Importeren> WordPress. Zorg ervoor dat u het selectievakje 'Bijlagen downloaden en importeren' aanvinkt wanneer hierom wordt gevraagd. Anders krijg je de afbeeldingen die horen bij sommige voorbeeldberichten niet.
Nadat de import is voltooid, kunt u deze controlelijst gebruiken om te bepalen of de inhoud wordt weergegeven zoals zou moeten.
We hebben geleerd dat dingen waar je op moet letten veel verschillende soorten hebben. Sommige zijn zelden gebruikte functies, andere zijn aanpassingsmogelijkheden, terwijl andere meer verwant zijn aan algemene ontwerpproblemen, die zich herhalen met elke WordPress-site die u ontwerpt. Onze lijst is zeker verre van volledig, dus we willen graag van je horen in de reacties! Wat zijn volgens jou de meest vergeten functies??
