Efter et par år (eller endda måneder) med at designe og udvikle WordPress-temaer, især for kunder, begynder du at indse, at en masse af funktionaliteten kan standardiseres eller destilleres ned i et "startertema eller -sæt". Dette hjælper med at få udviklingsprocessen påbegyndt og bevæge sig i takt.
Det bedste første skridt i at gøre dette, jeg har fundet, er at negle ned de fleste af de fælles funktioner og inkludere dem i functions.php . Det her functions.php filen skal udvides til at opfylde det særlige tema behov, da nye projekter opstår, men det vil give et mere end fantastisk udgangspunkt for udvikling.
Der er omkring 13 nøglefunktioner, som jeg gerne vil starte med og vil føje til dem efter behov ...
Navigationsmenufunktionen, der introduceres i WordPress 3.0, muliggør intuitiv oprettelse og vedligeholdelse af navigationsmenuer i temaer.
I det mindste vil et standardtema have brug for en hovednavigationsmenu, måske i overskriften og en sekundær navigationsmenu i sidefoden. For at gøre dette registrerer vi de to menuer "Hovedmenu" og "Sekundær Menu"
Selv om dette ikke er en særlig ny funktion, er det stadig rart at pakke det i en if function_exists() bare hvis brugeren sidder fast i en pre 3.0-installation:
I functions.php fil, skal du inkludere følgende:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Nu hvor menuerne er registreret, skal vi fortælle temaet, hvor de skal udskrives. Vi vil gerne have hovedmenuen vist i vores overskrift. Så i vores header.php fil, vi indeholder følgende kode:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Først kontrollerer vi for at se, om vi har en menu, der hedder 'main_menu', og hvis vi gør det, indsætter vi indholdet her, ellers vi tilbagekald til standard wp_list_pages() som vi yderligere kan tilpasse for at vise links som vi har brug for.
Hvis du vil have endnu mere tilpasning af menuen, kan du se WordPress codex side på wp_nav_menu() fungere.
Vi ønsker, at den sekundære menu skal vises i footeren, så vi åbner op footer.php og medtag følgende kode:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Denne funktion giver dig mulighed for at bruge brugerdefineret CSS til at style WordPress TinyMCE visuelle editor.
Opret en CSS-fil ved navn editor-style.css og indsæt dine stilarter indeni. Som pladsholder, kan jeg begynde med stilarter i editor-style.css fil af Twenty Twelve temaet.
I functions.php tilføj følgende:
add_editor_style();Hvis du ikke vil bruge navnet "editor-style" til din CSS-fil og også vil flytte filen et andet sted, f.eks. I et css-bibliotek, skal du derefter ændre funktionen.
For eksempel vil jeg navngive min fil tiny-mce-styles.css og jeg vil have det i min CSS-mappe; så min funktion vil se sådan ud:
add_editor_style('/css/editor-style.css'); Mens vi er i det, kan vi lige så godt indstille redaktøren for højre til venstre sprog. I temakataloget skal du oprette en CSS-fil, der hedder editor-style-rtl.css og i det mindste omfatter følgende:
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;}Igen, som pladsholder, er ovenstående stilarter fra Twenty Twelve-temaet. Restyle og udvide efter behov.
De fleste mennesker, der kommenterer blogs online, har en avatar forbundet med dem. Hvis de ikke gør det, og du ikke især kan lide WordPress standard avatar muligheder, kan du definere din egen.
For at gøre det skal du inkludere følgende kode 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');} Hvad vi laver her først, tjekker for at se om funktionen eksisterer. Hvis det gør, tilføjer vi et filter, der fortæller, at WordPress bruger vores brugerdefinerede avatar som standard.
Vi fortæller WordPress at finde denne avatar i vores "billeder" -mappe inde i temakataloget. Næste trin er naturligvis at skabe selve billedet og uploade det til "billeder" mappen.
Funktionen Postformater giver dig mulighed for at tilpasse stil og præsentation af indlæg. Af denne skrivning er der 9 standardiserede postformater, som brugerne kan vælge imellem: sideide, galleri, link, billede, citat, status, video, lyd og chat. Ud over disse indikerer standardindstillingen "Standard" postformat, at der ikke er angivet et postformat til det pågældende indlæg.
For at tilføje denne funktionalitet til dit tema skal du inkludere følgende kode i din functions.php , der angiver de postformater, du vil udnytte. fx Hvis du kun vil have til side, billede, link, citat og status Postformater, skal din kode se sådan ud:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );Funktionen med billedfunktion, som kodeksen forklarer, tillader forfatteren at vælge et repræsentativt billede for indlæg, sider eller brugerdefinerede posttyper.
For at aktivere denne funktionalitet skal du inkludere følgende kode i din functions.php :
add_theme_support( 'post-thumbnails' );Vi kunne stoppe der og overlade det til WordPress til at definere miniaturebillederne, eller vi kunne tage kontrol og definere dem selv. Vi vil gøre sidstnævnte, selvfølgelig!
Lad os sige, at vi kører et magasinsted, hvor det viste billede vises i mindst 3 forskellige størrelser. Måske et stort billede, hvis posten er omtalt eller er det nyeste, et mellemstor billede, hvis det bare er et indlæg blandt resten og en regelmæssig størrelse, der måske vises andetsteds.
Vi drager fordel af add_image_size() funktion, der instruerer WordPress til at lave en kopi af vores featured billede i vores definerede størrelser.
For at gøre dette tilføjer vi følgende til 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 hvordan man arbejder med add_image_size() funktion til enten blød afgrøde eller hårdt beskære dine billeder på WordPress codex side.
Når vi har defineret ovenstående billedstørrelser (almindelig, mellem og stor) - og da WordPress som standard ikke gør det for os - så tilføjer vi muligheden for at vælge vores billedstørrelser fra grænsefladen Tilknytningsskærmindstillinger .
Det ville være rart, hvis du kunne skrive det ønskede størrelse billede ved at vælge det fra dropdownen som du normalt ville bruge til standardformaterne for WordPress.
For at gøre dette tilføjer vi følgende til vores 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å plads kan vi vælge vores billedstørrelser.
Denne ene er enkel. Hvis du har bygget WordPress-temaer i et stykke tid, vil du huske de dage, hvor du manuelt skulle indeholde kode for at udføre RSS-feedet lige i header.php. Denne tilgang er renere og er afhængig af wp_head() action hook til at udføre den nødvendige kode.
I functions.php fil, skal du inkludere følgende:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Sørg for at du har it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Med denne funktion tager du det første skridt hen imod at gøre dit tema tilgængeligt til oversættelse.
Det er bedst at kalde denne funktion indefra after_setup_theme() handlingskrog, dvs. efter at opsætningen, registreringen og initialiseringen af dit tema er kørt.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Tilføj nu en mappe med navnet ' languages 'i din temakatalog.
Du kan lære mere om load_theme_textdomain () funktionen på WordPress codex side .
Indholdsbredde er en funktion i temaer, der giver dig mulighed for at indstille den maksimalt tilladte bredde for videoer, billeder og andet oEmbed-indhold i et tema.
Det betyder, at når du indsætter den pågældende YouTube-webadresse i editoren, og WordPress automatisk viser den aktuelle video på forsiden, vil videoen ikke overstige den bredde, du har angivet ved hjælp af $content_width variabel.
if ( ! isset( $content_width ) )$content_width = 600;WordPress anbefaler også tilføjelsen af følgende CSS:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Mens dette er nyttigt, er det lidt tungt udleveret. Det definerer indholdsbredden for alt indhold. Hvad hvis du ønskede videoer med en større bredde på sider end i indlæg og en endnu større størrelse i en brugerdefineret posttype? I øjeblikket er der ingen måde at definere dette på. Der er dog en funktion anmodning foreslår optagelse af $content_width variabel ind i den indbyggede add_theme_support() .
Dit typiske tema vil have mindst et sidebjælke. Koden til at definere sidebjælken er ret ligetil.
Tilføj følgende til din functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Dette registrerer og definerer et sidebar med navnet "Main Sidebar" og dets HTML markup.
Du kan lære mere om register_sidebar() funktion på WordPress codex side.
Du finder rutinemæssigt behovet for at have mere end det ene sidebjælke, så du kan bare kopiere / indsætte ovenstående kode og ændre navnet.
Der er også en register_sidebars() funktion, der giver dig mulighed for at registrere og definere flere sidebjælker på en gang, men det giver dig ikke fleksibiliteten til at give hvert nyt sidebar et unikt navn.
Hvis du viser uddrag af dine indlæg på en blogindeksside, vises WordPress som standard [...] at angive, at der er mere "efter springet".
Du vil sandsynligvis gerne tilføje et "mere link" og definere, hvordan det ser ud.
For at gøre dette skal vi tilføje følgende kode til vores 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 ) : ?>Hvis du har specielle instruktioner i dit tema f.eks. I din temaindstillingsside, som du gerne vil se brugeren, når de først aktiverer temaet, kan du bruge følgende funktion til at omdirigere dem der:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Vær særlig opmærksom på wp_redirect() fungere. Sørg for at erstatte ' themes.php?page=themeoptions 'med webadressen på din side.
Under udvikling finder jeg undertiden WordPress admin (værktøjslinjen) for at være ret distraherende.
Det er i en fast position øverst i vinduet og afhængigt af mit layout kan dække nogle elementer i overskriften.
Mens jeg stadig designer og udvikler, kan jeg godt lide at skjule administrativlinjen med denne praktiske funktion.
show_admin_bar( false );Har du nogen yndlingsfunktioner til spring, der starter WordPress-skabelonudvikling? Hvilke funktioner vil du gerne se? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, multi-værktøj billede via Shutterstock.