Na een paar jaar (of zelfs maanden) van het ontwerpen en ontwikkelen van WordPress-thema's, vooral voor klanten, begin je je te realiseren dat een groot deel van de functionaliteit kan worden gestandaardiseerd of gedestilleerd tot een "startersthema of -pakket". Dit helpt om het ontwikkelingsproces op gang te krijgen en snel voortgang te boeken.
De beste eerste stap om dit te doen, heb ik ontdekt, is om de meeste algemene functies vast te leggen en ze in de functions.php . Deze functions.php het bestand moet worden uitgebreid om aan de behoeften van het specifieke thema te voldoen naarmate er nieuwe projecten ontstaan, maar het zal een meer dan geweldig startpunt voor ontwikkeling bieden.
Er zijn ongeveer 13 hoofdfuncties waar ik graag mee start en waar nodig aan toevoegen ...
De navigatiemenu-functie, geïntroduceerd in WordPress 3.0, zorgt voor het intuïtief maken en onderhouden van navigatiemenu's in thema's.
Op zijn minst zal een standaardthema een hoofdnavigatiemenu nodig hebben, misschien in de koptekst en een secundair navigatiemenu in de voettekst. Om dit te doen, registreren we die twee menu's "Hoofdmenu" en "Secundair Menu"
Hoewel dit geen bijzonder nieuwe functie is, is het nog steeds leuk om het in een if function_exists() voor het geval de gebruiker vastzit in een pre 3.0-installatie:
In de functions.php bestand, neem het volgende op:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Nu de menu's zijn geregistreerd, moeten we het thema vertellen waar deze moeten worden uitgevoerd. We willen graag dat het hoofdmenu in onze kop verschijnt. Dus, in onze header.php bestand bevatten we de volgende code:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Eerst controleren we of we een menu met de naam 'main_menu' hebben gedefinieerd en als we dat doen, voegen we hier de inhoud in, anders vallen we terug naar de standaard wp_list_pages() die we verder kunnen aanpassen om de links weer te geven zoals we nodig hebben.
Zie de. Als u verdere aanpassingen aan het menu wilt WordPress codex-pagina aan wp_nav_menu() functie.
We willen dat het secundaire menu in het voetgedeelte verschijnt, dus we openen de footer.php en neem de volgende code op:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Met deze functie kunt u aangepaste CSS gebruiken om de visuele editor van WordPress TinyMCE op te maken.
Maak een CSS-bestand met de naam editor-style.css en plak je stijlen in. Als een tijdelijke aanduiding, begin ik graag met stijlen in de editor-style.css bestand van het Twenty Twelve-thema.
In de functions.php voeg het volgende toe:
add_editor_style();Als u de naam "editor-style" voor uw CSS-bestand niet wilt gebruiken en het bestand ook elders wilt verplaatsen, bijvoorbeeld binnen een css-directory, wijzigt u de functie.
Ik wil bijvoorbeeld mijn bestand een naam geven tiny-mce-styles.css en ik wil het in mijn CSS-map; dus mijn functie zal er als volgt uitzien:
add_editor_style('/css/editor-style.css'); Terwijl we bezig zijn, kunnen we net zo goed de editor stijlen voor talen die van rechts naar links worden geschreven. Maak in de themamap een CSS-bestand met de naam editor-style-rtl.css en op zijn minst het volgende:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Nogmaals, als tijdelijke aanduiding zijn de bovenstaande stijlen van het Twenty Twelve-thema. Restyle en verlengen indien nodig.
De meeste mensen die reageren op blogs online hebben een avatar die hiermee geassocieerd is. Als ze dat echter niet doen en je niet echt van de standaard avataropties van WordPress houdt, kun je je eigen avataropties definiëren.
Om dit te doen, neemt u de volgende code op in uw functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} Wat we hier eerst doen, is controleren of de functie bestaat. Als dit het geval is, voegen we een filter toe waarmee WordPress onze aangepaste avatar als standaard gebruikt.
We vertellen WordPress dat we deze avatar moeten vinden in onze "afbeeldingen" -directory binnen de themamap. De volgende stap is natuurlijk om de afbeelding zelf te maken en deze te uploaden naar de map "images".
Met de functie postformaten kunt u de stijl en presentatie van berichten aanpassen. Vanaf dit schrijven zijn er 9 gestandaardiseerde postformaten waaruit gebruikers kunnen kiezen: opzij, galerij, link, afbeelding, citaat, status, video, audio en chat. In aanvulling hierop geeft het standaard "Standaard" postformaat aan dat er geen postformaat is gespecificeerd voor het betreffende bericht.
Als u deze functionaliteit aan uw thema wilt toevoegen, neemt u de volgende code op in uw functions.php , met vermelding van de postformaten waarvan u gebruik wilt maken. bijv. Als u alleen de postformaten opzij, afbeelding, link, aanhalingstekens en status wilt, moet uw code er als volgt uitzien:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );De afgebeelde afbeeldingsfunctie, als de codex legt uit, laat de auteur toe om een representatieve afbeelding te kiezen voor Posts, Pages of Custom Post Types.
Om deze functionaliteit in te schakelen, neemt u de volgende code op in uw functions.php :
add_theme_support( 'post-thumbnails' );We zouden daar kunnen stoppen en het aan WordPress overlaten om de miniaturen te definiëren of we zouden de controle kunnen nemen en ze zelf kunnen definiëren. We doen het laatste, duidelijk!
Laten we zeggen dat we een tijdschriftsite hebben waar de aanbevolen afbeelding in minimaal 3 verschillende formaten wordt weergegeven. Misschien een grote afbeelding als de post wordt weergegeven of is de nieuwste, een middelgrote afbeelding als het gewoon een bericht tussen de rest en een normale grootte misschien elders te verschijnen.
We maken gebruik van de add_image_size() functie die WordPress instrueert om een kopie van onze aanbevolen afbeelding in onze gedefinieerde formaten te maken.
Om dit te doen, voegen we het volgende toe aan de functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Zie hoe u met de kunt werken add_image_size() functie om ofwel zacht bij te snijden of hard bijsnijden van uw afbeeldingen op de WordPress codex-pagina.
Zodra we de bovenstaande afbeeldingsformaten hebben gedefinieerd (normaal, gemiddeld en groot) - en omdat WordPress dat standaard niet voor ons doet - voegen we de mogelijkheid toe om onze afbeeldingsformaten te selecteren in de interface Bijlage-instellingen koppelen.
Het zou mooi zijn als je bij het schrijven van een bericht de gewenste afbeelding kunt invoegen door deze te selecteren in de vervolgkeuzelijst zoals je normaal zou doen voor de WordPress-standaardgroottes.
Om dit te doen, voegen we het volgende toe aan onze functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Met dat op zijn plaats, kunnen we onze beeldgroottes selecteren.
Deze is eenvoudig. Als u al een tijdje WordPress-thema's hebt gemaakt, herinnert u de dagen waarop u handmatig code moest invoeren om de RSS-feed rechtstreeks in header.php uit te voeren. Deze aanpak is schoner en vertrouwt op de wp_head() actiehaak om de benodigde code uit te voeren.
In de functions.php bestand, neem het volgende op:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Zorg dat je dat hebt gedaan it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Met deze functie zet u de eerste stap om uw thema beschikbaar te maken voor vertaling.
Het is het beste om deze functie vanuit de after_setup_theme() actiehaak dwz nadat de setup-, registratie- en initialisatieacties van uw thema zijn uitgevoerd.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Voeg nu een map toe met de naam ' languages in je themamap.
U kunt meer informatie krijgen over de functie load_theme_textdomain () op de WordPress codex-pagina .
Inhoudsbreedte is een functie in thema's waarmee u de maximaal toegestane breedte voor video's, afbeeldingen en andere oInBed-inhoud in een thema kunt instellen.
Dat betekent dat wanneer u die YouTube-URL in de editor plakt en WordPress automatisch de daadwerkelijke video op de voorkant weergeeft, die video de breedte die u met behulp van de $content_width variabel.
if ( ! isset( $content_width ) )$content_width = 600;WordPress beveelt ook de toevoeging van de volgende CSS aan:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Hoewel dit nuttig is, is het een beetje zwaarhandig. Het definieert de inhoudsbreedte voor alle inhoud. Wat als je video's met een grotere breedte op pagina's wilde dan in berichten en een nog grotere grootte in een aangepast berichttype? Momenteel is er geen manier om dit te definiëren. Er is echter een functie verzoek voorstelt de opname van de $content_width variabele in de ingebouwde add_theme_support() .
Uw typische thema heeft ten minste één zijbalk. De code om de zijbalk te definiëren is vrij eenvoudig.
Voeg het volgende toe aan uw functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Dit registreert en definieert een zijbalk met de naam "Hoofdzijbalk" en de HTML-markup ervan.
U kunt meer leren over de register_sidebar() functie op de WordPress codex-pagina.
U zult routinematig de behoefte vinden om meer dan die zijbalk te hebben, zodat u de bovenstaande code kunt kopiëren en plakken en de naam kunt wijzigen.
Er is ook een register_sidebars() functie waarmee u meerdere zijbalken in één keer kunt registreren en definiëren, maar het biedt u niet de flexibiliteit om elke nieuwe zijbalk een unieke naam te geven.
Als u fragmenten van uw berichten op een blogindexpagina weergeeft, wordt standaard WordPress weergegeven [...] om aan te geven dat er meer is "na de sprong".
U wilt waarschijnlijk een "meer link" toevoegen en definiëren hoe dat eruit ziet.
Om dit te doen, moeten we de volgende code toevoegen aan onze functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Als u speciale instructies in uw thema hebt, bijvoorbeeld. op je pagina met thema-opties die je wilt dat de gebruiker ziet wanneer ze het thema voor het eerst activeren, kun je de volgende functie gebruiken om ze daar door te sturen:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Besteed speciale aandacht aan de wp_redirect() functie. Zorg ervoor dat u de ' themes.php?page=themeoptions 'met de URL van uw pagina.
Tijdens de ontwikkeling vind ik de WordPress admin (tool) -balk soms behoorlijk afleidend.
Hij staat in een vaste positie aan de bovenkant van het venster en kan, afhankelijk van mijn lay-out, enkele elementen van de kop bedekken.
Terwijl ik nog steeds aan het ontwerpen en ontwikkelen ben, hou ik ervan de beheerbalk te verbergen met deze handige functie.
show_admin_bar( false );Heb je favoriete functies voor het ontwikkelen van WordPress-sjablonen? Welke functies zou u willen zien? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, multi-tool afbeelding via Shutterstock.