Etter noen år (eller til og med måneder) med å designe og utvikle WordPress-temaer, spesielt for klienter, begynner du å innse at mye av funksjonaliteten kan standardiseres eller destilleres ned i et "startstempel eller -sett". Dette bidrar til å få utviklingsprosessen påbegynt og bevege seg langsgående.
Det beste første skrittet i å gjøre dette, har jeg funnet, er å spikre ned de fleste av de vanlige funksjonene og inkludere dem i functions.php . Dette functions.php filen må utvides for å møte temaets behov som nye prosjekter oppstår, men det vil gi et mer enn fantastisk utgangspunkt for utvikling.
Det er omtrent 13 nøkkelfunksjoner som jeg liker å starte med og vil legge til dem etter behov ...
Navigasjonsmenyfunksjonen, introdusert i WordPress 3.0, muliggjør intuitiv opprettelse og vedlikehold av navigasjonsmenyer i temaer.
I det minste vil et standard tema ha en hovednavigasjonsmeny, kanskje i toppteksten og en sekundær navigasjonsmeny i bunnteksten. For å gjøre dette, registrerer vi de to menyene "Hovedmeny" og "Sekundærmeny"
Selv om dette ikke er en spesielt ny funksjon, er det fortsatt hyggelig å pakke det inn i en if function_exists() bare hvis brukeren sitter fast i en pre 3.0-installasjon:
I functions.php fil, ta med følgende:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Nå som menyene er registrert, må vi fortelle temaet hvor de skal sendes ut. Vi vil at hovedmenyen skal vises i vår overskrift. Så i vår header.php fil, vi inkluderer 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 sjekker vi om vi har en meny som heter main_menu, og hvis vi gjør det, legger vi inn innholdet her, ellers faller vi tilbake til standard wp_list_pages() som vi kan tilpasse for å vise koblingene som vi trenger.
Hvis du vil ha enda mer tilpasning av menyen, se WordPress codex side på wp_nav_menu() funksjon.
Vi vil at den sekundære menyen skal vises i bunnteksten, så vi åpner opp footer.php og ta med følgende kode:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Denne funksjonen lar deg bruke egendefinert CSS til å utforme WordPress TinyMCE visuell redigeringsprogram.
Opprett en CSS-fil som heter editor-style.css og lim inn stilene dine inni. Som plassholder liker jeg å begynne med stiler i editor-style.css fil av Twenty Twelve temaet.
I functions.php legg til følgende:
add_editor_style();Hvis du ikke vil bruke navnet "editor-style" for din CSS-fil og også vil flytte filen andre steder, for eksempel i en css-katalog, endrer du funksjonen.
For eksempel vil jeg nevne filen min tiny-mce-styles.css og jeg vil ha det i CSS-katalogen min; så min funksjon vil se slik ut:
add_editor_style('/css/editor-style.css'); Mens vi er i det, kan vi like godt utforme redaktøren for høyre til venstre språk. I temakatalogen, opprett en CSS-fil som heter editor-style-rtl.css og i det minste inkluderer 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;}Igjen, som plassholder, er de ovennevnte stilene fra Twenty Twelve-temaet. Restyler og utvide etter behov.
De fleste som kommenterer blogger på nettet, har en avatar knyttet til dem. Hvis de ikke gjør det, og du ikke liker de vanlige avataralternativene for WordPress, kan du definere ditt eget.
For å gjøre dette, ta med 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');} Det vi gjør her først, sjekker for å se om funksjonen eksisterer. Hvis det gjør det, legger vi til et filter som forteller WordPress å bruke vår tilpassede definerte avatar som standard.
Vi forteller WordPress å finne denne avataren i vår "bilder" -katalog inne i temakatalogen. Neste trinn er selvsagt å lage selve bildet og laste det opp til "bilder" -mappen.
Postformatfunksjonen lar deg tilpasse stilen og presentasjonen av innlegg. Med denne skrivingen er det 9 standardiserte innleggformater som brukere kan velge mellom: sideide, galleri, lenke, bilde, sitat, status, video, lyd og chat. I tillegg til disse angir standard "Standard" postformat at det ikke er angitt postformat for det aktuelle innlegget.
For å legge til denne funksjonaliteten til temaet ditt, ta med følgende kode i din functions.php , og spesifiserer innleggformatene du vil dra nytte av. f.eks. Hvis du bare vil ha til side, bilde, lenke, sitat og status Postformater, skal koden din se slik ut:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );Den uthevede bildefunksjonen, som kodeksen forklarer, lar forfatteren velge et representativt bilde for innlegg, sider eller egendefinerte innleggtyper.
For å aktivere denne funksjonaliteten, ta med følgende kode i din functions.php :
add_theme_support( 'post-thumbnails' );Vi kunne stoppe der og la det opp til WordPress for å definere miniatyrstørrelsene, eller vi kunne ta kontroll og definere dem selv. Vi gjør det sistnevnte, selvfølgelig!
La oss si at vi driver et magasinområde der det kjennetegnede bildet vil vises i minst 3 forskjellige størrelser. Kanskje et stort bilde hvis innlegget er omtalt eller er det nyeste, et mellomstort bilde hvis det bare er et innlegg blant resten og en vanlig størrelse, som kanskje vises andre steder.
Vi benytter oss av add_image_size() funksjon som instruerer WordPress til å lage en kopi av vårt kjennetegnet bilde i våre definerte størrelser.
For å gjøre dette legger vi til følgende 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 hvordan du skal jobbe med add_image_size() Fungerer for enten myk beskjæring eller hardt beskjære bildene dine på WordPress codex side.
Når vi har definert bildestørrelsene ovenfor (vanlig, medium og stor) - og siden WordPress som standard ikke gjør det for oss - legger vi til muligheten til å velge våre bildestørrelser fra grensesnittet for vedleggsvisning .
Det ville være fint hvis du kunne skrive inn et ønsket innlegg ved å velge det fra rullegardinmenyen som du normalt ville ha for standardformatene for WordPress.
For å gjøre dette, legger vi til følgende i vår 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å plass, kan vi velge våre bildestørrelser.
Denne er enkel. Hvis du har bygd WordPress-temaer for en stund, husker du dagene da du måtte manuelt inkludere kode for å skrive ut RSS-feeden rett i header.php. Denne tilnærmingen er renere og er avhengig av wp_head() Handlingskrok for å utføre den nødvendige koden.
I functions.php fil, ta med følgende:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Pass på at du har it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Med denne funksjonen tar du det første skrittet mot å gjøre temaet ditt tilgjengelig for oversettelse.
Det er best å ringe denne funksjonen innefra after_setup_theme() Handlingskrok, dvs. etter at oppsettet, registrerings- og initialiseringshandlingene dine har kjørt.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Legg nå en katalog med navnet ' languages 'i temakatalogen din.
Du kan lære mer om load_theme_textdomain () -funksjonen på WordPress codex side .
Innholdsbredde er en funksjon i temaer som lar deg sette maksimalt tillatt bredde for videoer, bilder og annet oEmbed-innhold i et tema.
Det betyr at når du limer inn den YouTube-nettadressen i editoren, og WordPress automatisk viser den faktiske videoen på forsiden, vil videoen ikke overstige bredden du angir ved hjelp av $content_width variabel.
if ( ! isset( $content_width ) )$content_width = 600;WordPress anbefaler også tillegg av følgende CSS:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Selv om dette er nyttig, er det litt tungt overlevert. Det definerer innholdsbredden for alt innhold. Hva om du ville ha videoer med større bredde på sider enn i innlegg og enda større størrelse i en egendefinert innleggstype? For tiden er det ikke mulig å definere dette. Det er imidlertid en funksjonsforespørsel foreslår inkludering av $content_width variabel inn i den innebygde add_theme_support() .
Ditt typiske tema vil ha minst ett sidebjelke. Koden for å definere sidebjelken er ganske enkel.
Legg til følgende i 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 som heter "Hoved sidebjelke" og HTML-oppslaget.
Du kan lære mer om register_sidebar() funksjon på WordPress codex siden.
Du vil rutinemessig finne behovet for å ha mer enn det ene sidebaret, så du kan bare kopiere / lime inn koden ovenfor og endre navnet.
Det er også en register_sidebars() funksjon som lar deg registrere og definere flere sidebjelker samtidig, men det gir deg ikke fleksibiliteten til å gi hvert nytt sidebar et unikt navn.
Hvis du viser utdrag av innleggene dine på en bloggindeksside, vil WordPress som standard vise som standard [...] for å indikere at det er mer "etter hoppet".
Du vil mest sannsynlig legge til en "mer link" og definere hvordan det ser ut.
For å gjøre dette må vi legge til følgende kode i 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 ) : ?>Hvis du har spesielle instruksjoner i temaet ditt, f.eks. På siden for temaalternativer du vil at brukeren skal se når de først aktiverer temaet, kan du bruke følgende funksjon for å omdirigere dem der:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Vær særlig oppmerksom på wp_redirect() funksjon. Pass på å erstatte " themes.php?page=themeoptions 'med nettadressen til siden din.
Under utviklingen finner jeg noen ganger WordPress admin (tool) bar for å være ganske distraherende.
Den befinner seg i en fast stilling øverst i vinduet, og avhengig av at mitt layout kan dekke noen elementer i overskriften.
Mens jeg fortsatt designer og utvikler, liker jeg å skjule administrasjonslinjen med denne praktiske funksjonen.
show_admin_bar( false );Har du noen favorittfunksjoner for hoppe som starter WordPress-malutvikling? Hvilke funksjoner ønsker du å se? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, multi-verktøy image via Shutterstock.