Efter några år (eller till och med månader) för att designa och utveckla WordPress-teman, särskilt för kunder, börjar du inse att mycket av funktionaliteten kan standardiseras eller destilleras ner till ett "starttema eller -paket". Detta hjälper till att utvecklingsprocessen påbörjas och flyttas längs med.
Det bästa första steget i att göra detta, har jag funnit, är att spika ner de flesta av de gemensamma funktionerna och inkludera dem i functions.php . Detta functions.php filen måste utökas för att möta det specifika temat behov som nya projekt uppstår, men det kommer att ge en mer än fantastisk startpunkt för utveckling.
Det finns cirka 13 nyckelfunktioner som jag gillar att börja med och kommer att lägga till dem efter behov ...
Navigationsmenyfunktionen, som introduceras i WordPress 3.0, möjliggör en intuitiv skapande och underhåll av navigeringsmenyer i teman.
I åtminstone ett standardtema behöver en huvudnavigeringsmeny, kanske i rubriken och en sekundär navigeringsmeny i sidfoten. För att göra detta registrerar vi de två menyerna "Huvudmeny" och "Sekundär Meny"
Även om detta inte är en särskilt ny funktion, är det fortfarande trevligt att lägga den i en if function_exists() bara om användaren är fast i en pre 3.0-installation:
I functions.php fil, inkludera följande:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Nu när menyerna är registrerade måste vi berätta för temat var de ska matas ut. Vi vill att huvudmenyn ska visas i vår rubrik. Så, i vår header.php fil, vi inkluderar följande kod:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Först kontrollerar vi om vi har en meny som heter main_menu, och om vi gör så lägger vi in innehållet här, annars faller vi tillbaka till standard wp_list_pages() som vi kan ytterligare anpassa för att visa länkarna som vi behöver.
Om du vill ha ytterligare anpassning av menyn, se WordPress codex sida på wp_nav_menu() fungera.
Vi vill att den sekundära menyn ska visas i sidfoten, så vi öppnar upp footer.php och inkludera följande kod:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Med den här funktionen kan du använda anpassad CSS för att ställa in den visuella editoren WordPress TinyMCE.
Skapa en CSS-fil som heter editor-style.css och klistra in dina stilar inomhus. Som platshållare gillar jag att börja med stilar i editor-style.css fil av Twenty Twelve-temat.
I functions.php lägg till följande:
add_editor_style();Om du inte vill använda namnet "editor-style" för din CSS-fil och även vill flytta filen på annat håll, t.ex. i en css-katalog, ändra sedan funktionen.
Till exempel vill jag namnge min fil tiny-mce-styles.css och jag vill ha den i min CSS-katalog så min funktion kommer att se ut så här:
add_editor_style('/css/editor-style.css'); Medan vi är på det, kan vi lika väl ställa redigeraren för höger-vänster språk. I temakatalogen skapar du en CSS-fil som heter editor-style-rtl.css och innehålla åtminstone följande:
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;}Återigen, som platshållare, är ovanstående stilar från Twenty Twelve-temat. Återställ och utök efter behov.
De flesta som kommenterar bloggar på nätet har en avatar som är associerad med dem. Om de inte gör det och du inte gillar WordPress standard avatar alternativ kan du definiera din egen.
För att göra så, ta med följande kod i din 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');} Vad vi gör här först kontrollerar för att se om funktionen finns. Om det gör, lägger vi till ett filter som säger att WordPress använder vår anpassade avatar som standard.
Vi säger WordPress att hitta denna avatar i vår "bilder" -mapp i temakatalogen. Nästa steg är självklart att skapa själva bilden och ladda upp den till mappen "bilder".
Funktionen Postformat låter dig anpassa stilen och presentationen av inlägg. Med detta skrivande finns det 9 standardiserade postformat som användare kan välja mellan: sidvis, galleri, länk, bild, citat, status, video, ljud och chatt. Utöver dessa indikerar standardinställningen "Standard" postformat att inget postformat anges för den aktuella posten.
Om du vill lägga till den här funktionen till ditt tema, inkludera följande kod i din functions.php , med angivande av de postformat som du kommer att dra nytta av. t.ex. Om du bara vill ha sidan, bild, länk, citat och status Postformat ska din kod se så här ut:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );Den utvalda bildfunktionen, som codexen förklarar, tillåter författaren att välja en representativ bild för inlägg, sidor eller anpassade posttyper.
För att aktivera denna funktionalitet, inkludera följande kod i din functions.php :
add_theme_support( 'post-thumbnails' );Vi kunde sluta där och lämna upp till WordPress för att definiera miniatyrstorlekarna eller vi kunde ta kontroll och definiera dem själva. Vi gör det senare, självklart!
Låt oss säga att vi kör en tidningssida där den presenterade bilden kommer att visas i minst 3 olika storlekar. Kanske en stor bild om posten presenteras eller är den nyaste, en medelstora bilden om det bara är ett inlägg bland resten och en vanlig storlek som kanske visas någon annanstans.
Vi drar nytta av add_image_size() funktion som instruerar WordPress att göra en kopia av vår utvalda bild i våra definierade storlekar.
För att göra detta lägger vi till följande i functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Se hur man arbetar med add_image_size() funktionen till antingen mjuk grödor eller hårdgrödor dina bilder på WordPress codex sida.
När vi har definierat ovanstående bildstorlekar (vanliga, medelstora och stora) - och eftersom WordPress som standard inte gör det för oss - lägger vi till möjligheten att välja våra bildstorlekar från gränssnittet för bildskärmsinställningar .
Det vore trevligt om du kunde skriva in en önskad storlek genom att välja den från rullgardinsmenyn som du normalt skulle ha för standardformat för WordPress.
För att göra detta lägger vi till följande i vårt 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'); Med det på plats kan vi välja våra bildstorlekar.
Den här är enkel. Om du har byggt WordPress-teman ett tag kommer du ihåg de dagar då du måste manuellt inkludera kod för att mata ut RSS-flödet direkt i header.php. Detta tillvägagångssätt är renare och bygger på wp_head() åtgärdskrok för att mata ut nödvändig kod.
I functions.php fil, inkludera följande:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Se till att du har it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Med den här funktionen tar du det första steget mot att göra ditt tema tillgängligt för översättning.
Det är bäst att ringa denna funktion inifrån after_setup_theme() Åtgärdskrok, dvs efter att du har kört inställningarna för inställning, registrering och initialisering av ditt tema.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Lägg nu till en katalog med namnet " languages "i din temakatalog.
Du kan lära dig mer om load_theme_textdomain () -funktionen på WordPress codex sida .
Innehållsbredd är en funktion i teman som låter dig ställa in den maximala tillåtna bredden för videor, bilder och annat oEmbed-innehåll i ett tema.
Det innebär att när du klistrar in den här YouTube-webbadressen i redigeraren och WordPress automatiskt visar den faktiska videon i frontänden, kommer den här videon inte att överskrida den bredd du ställde in med $content_width variabel.
if ( ! isset( $content_width ) )$content_width = 600;WordPress rekommenderar även tillägg av följande CSS:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Medan detta är användbart är det lite tungt överlämnat. Det definierar innehållsbredd för allt innehåll. Vad händer om du vill ha videor med en större bredd på sidor än i inlägg och en ännu större storlek i en anpassad posttyp? För närvarande finns det inget sätt att definiera detta. Det finns dock en funktion begäran föreslår införandet av $content_width variabel in i den inbyggda add_theme_support() .
Ditt typiska tema kommer att ha minst ett sidofält. Koden för att definiera sidofältet är ganska enkelt.
Lägg till följande i din functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Detta registrerar och definierar ett sidofält med namnet "Main Sidebar" och dess HTML-märkning.
Du kan lära dig mer om register_sidebar() funktion på WordPress codex sidan.
Du kommer rutinmässigt att hitta behovet av att ha mer än det enda sidfältet, så du kan bara kopiera / klistra in ovanstående kod och ändra namn.
Det finns även en register_sidebars() funktion som gör att du kan registrera och definiera flera sidfält på en gång men det ger dig inte flexibiliteten att ge varje nytt sidfält ett unikt namn.
Om du visar utdrag av dina inlägg på en bloggindexsida visas WordPress som standard [...] för att indikera att det finns mer "efter hoppet".
Du kommer sannolikt att lägga till en "mer länk" och definiera hur det ser ut.
För att göra detta måste vi lägga till följande kod till vår 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 ) : ?>Om du har speciella anvisningar i ditt tema, t.ex. På din teman options sida som du vill att användaren ska se när de först aktiverar temat, kan du använda följande funktion för att omdirigera dem där:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Var särskilt uppmärksam på wp_redirect() fungera. Se till att du byter ut " themes.php?page=themeoptions 'med webbadressen till din sida.
Under utveckling kan jag ibland hitta WordPress admin (verktygsfältet) för att vara ganska distraherande.
Den befinner sig i ett fast läge längst upp i fönstret och beroende på att min layout kan täcka några delar av rubriken.
Medan jag fortfarande designar och utvecklar gillar jag att dölja adminfältet med den här praktiska funktionen.
show_admin_bar( false );Har du några favoritfunktioner för att starta WordPress-mallutveckling? Vilka funktioner skulle du vilja se? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, multi-tool image via Shutterstock.