Å frigjøre et WordPress-tema på en markedsplass, som ThemeForest, hvor publikum er så stort og mangfoldig, har noen utfordringer. Du kan ikke teste en løsning direkte med klienten. Du må planlegge på forhånd for alle kantsaker, og sørg for at temaet ditt er så tilpassbart som mulig. Hvis du er uerfaren, er det sjansene for at noen ting dessverre vil gå gjennom sprekker. Heldigvis har vi trukket vår hardt opptjente visdom for å hjelpe deg med å unngå å gjenta de samme feilene vi gjorde.
WordPress har muligheten til å gjøre et innlegg passordbeskyttet: Besøkende skal kunne få tilgang til denne typen innhold bare etter å skrive inn passordet. Du trenger ikke å gjøre noe spesielt med innlegget selv, men hvis du glemmer å sjekke før du viser kommentarer, vil besøkende fortsatt se alle kommentarer på det beskyttede innlegget, noe som slår formålet med å beskytte innlegget i utgangspunktet. Du kan rette opp dette med en enkel innsjekking comments.php:
Det er en spesiell malfil, attachment.php, som brukes når en besøkende klikker på et vedlegg. Vedlegg kan være bilder, videoer, musikkfiler ... hva som er satt inn med vedleggsknappene på redigeringsprogrammet:
Opprette attachment.php er ikke obligatorisk: Hvis malen ikke er der, vil nettleseren bare vise filen, med et passende plugin hvis nødvendig. Jeg vil si at den største fordelen med attachment.php er det når besøkende bestemmer seg for å se for eksempel et bilde i full størrelse, er navigasjonen fortsatt tilgjengelig. Du kan også vise noen tilpasset informasjon om vedlegget. Standard TwentyTen-temaet i WordPress 3.0 har et interessant attachment.php som viser bildestørrelser.
hvis (wp_attachment_is_image ()) echo ' | '; $ metadata = wp_get_attachment_metadata (); printf ('Full størrelse er% s piksler', 'tjueen'), sprintf ('% 3 $ s ×% 4 $ s', wp_get_attachment_url (), esc_attr (__ ('Link til fullstørrelse bilde' tjuefem)), $ metadata ['bredde'], $ metadata ['høyde']));
Du har kanskje hørt om å støtte rett til venstre språk, men med mindre du er dyktig på et av disse språkene selv, kan du tenke deg at det er alt veldig komplisert.
Det er faktisk ganske enkelt å introdusere støtte i temaet ditt for språk som er skrevet til høyre, som for eksempel arabisk og hebraisk. Stilene i rtl.css vil tilsidesette de viktigste style.css når WP_LANG-variabelen i settings.php er satt til et høyre til venstre språk, for eksempel arabisk:
define ('WP_LANG', 'ar')
Din rtl.css Først trenger denne erklæringen:
kropp retning: rtl; Unicode-Bidi: Embed;
Den første eiendommen er selvforklarende. Den andre "åpner et ekstra nivå for innlemming med hensyn til toveis algoritmen" (W3C).
De rtl.css filen trenger ikke å duplisere hver stil i style.css, bare de tingene som må endres når de leses fra venstre til høyre. Tenk som om nettstedet ble sett i et speil: flyter bytt retning (float: venstre blir float: høyre og omvendt) og marginer og polstring er omvendt (margin-høyre: 18px blir margin-venstre: 18px; 0). Tenk også på store deler av nettstedet: hvilken retning vil overskriften flyte? Ikke glem alle de små detaljene, som å reversere innsnittene i dine definisjonslister og blokkeringer. For å få en følelse for det, kan du prøve å bytte språk til arabisk eller hebraisk på nettsteder som Facebook eller Wikipedia, eller besøke internasjonale nettsteder som Al Jazeera.
Tro det eller ei, det handler om alt det er å vite.
Å utforme TinyMCE-editoren som følger med WordPress, bare opprett en fil som heter redaktør style.css i temakatalogen din. Det er veldig enkelt å fylle, da du bare trenger å matche typografien med det på hovedskjemaet, og det er ikke nødvendig å bekymre deg for blokkoppsett. TinyMCE har noen kjennskaper skjønt. Du kan unngå at linjene blir for lange ved å angi en egenskap med maksimal bredde på .mceContentBody-klassen.
Hvis du inkluderer støtte for høyre til venstre språk via rtl.css, Du bør også legge til en fil som heter redaktør-style-rtl.css, som noen egenskaper, for eksempel listemarginer og paddings, må også endres i redigeringsprogrammet.
Paginerte oppføringer (ikke forveksles med en paginert liste av oppføringer) er delt inn i sider av forfatteren deres med Quicktag. Admittedly, denne funksjonen ser ikke ut til å være mye brukt på de fleste WordPress-nettsteder, men hvis du glemmer å gjøre din del, vil besøkende ikke kunne lese utover den første siden. For å la hele innholdet bli lest, må du bruke wp_link_pages-taggen i The Loop
wp_link_pages (array ('before' => 'sider: ',' after '=>'
',' next_or_number '=>' nummer '));
For et innlegg med tre sider, utdataer dette følgende:
sider: 1 2 3
Besøkende kan da klikke på sidetallene for å lese hele innlegget. Den komplette dokumentasjonen for denne funksjonen finnes på WordPress-kodeksen.
Mens du ikke kan style alle mulige widgeter under solen, er det en god ide å kontrollere at hver widget som følger med WordPress, overbevisende viser. Alle kan få en valgfri tittel, og noen har forskjellige utseende. For eksempel, Kategori widget kan vises som en rullegardin og viser også flere nivåer av nestede kategorier eller koder, så sørg for at du styler nestede lister. Vær særlig oppmerksom på kalendergettet. Det er et bord, og du vil vanligvis at dagene skal være sentrert i sine celler, slik at de samsvarer med ukedagene i toppteksten. På det første bildet ser tallene litt ut av sted, mens de er riktig justert på det andre bildet.
Til slutt vil det hjelpe hvis du begynner med å utforme gode stiler for .widget klassen, som den vil bli brukt på alle widgets, selv de som kommer fra tredjeparter. Med spesielt fleksible layouter, må du sørge for at widgets ikke strekker seg for mye, da det får dem til å se veldig rart ut.
Kommentarer er litt av et designkonferrum. Det er mange ting å vise (avatarer, kommentars navn, kommentar datoer, kommentar body, svar knapper), så du må gi det ganske mye plass, men samtidig bør det ikke overvelde hovedinnholdet , og bør være visuelt tydelig på en eller annen måte. Gjengede kommentarer sammensetter alle disse vanskelighetene, fordi du også må skille svar. Vanligvis oppnås dette med en margin, men siden du ikke vet hvor mange svar svarene vil være, risikerer du heller ikke å tillate nok bredde eller tillate for mye.
Vær også oppmerksom på at svarskjemaet ikke bare vil vises nederst på siden, men også i midten av kommentar-tråden når noen klikker på svarknappen. Så marginer og polstring skal være tilstrekkelig for begge tilfeller. Det er også koblingen "Avbryt svar" som må styles og plasseres.
Til slutt bør du sørge for at kommentarpaginering fungerer, at kommentarene gjengir riktig, både når det er svært få, og når det er mange, og at gjengede kommentarer ikke overlaster grensene til beholderen. Vær forsiktig så du ikke blander kommentarer sammen, og ikke glem å sjekke oppsettet når avatarer er aktivert og deaktivert.
wp_footer ()
og wp_head ()
Anrop wp_footer () like før lukking av kroppsmerket, og wp_head () like før lukkehodet. Begge funksjonene er action kroker, som kan brukes av plugin og tema utviklere. Hvis du forlater dem, kan det hende at noen funksjoner og plugins ikke fungerer, inkludert egendefinerte overskrifter.
Selv om mange temaer fortsatt er avhengige av plugins, for eksempel TimThumb, WordPress, siden 2.9, inkluderer støtte for miniatyrer ('featured images') ut av boksen. For å dra nytte av denne funksjonaliteten, legger du bare til noen linjer functions.php:
add_theme_support ('post-miniatyrer'); set_post_thumbnail_size (70, 70);
Den første linjen forteller WordPress, temaet ditt støtter miniatyrbilder, mens det andre styrker miniatyrstørrelsen til 70x70px, for å unngå å bryte opp layoutet med forskjellige størrelse miniatyrbilder. I tillegg kan du velge omstillingspolitikken. Eksemplet ovenfor vil bare endre størrelsen på bildet, mens
set_post_thumbnail_size (70, 70, TRUE);
vil også beskjære bildet slik at det passer til det angitte forholdet. Du kan også lage flere miniatyrstørrelser, for å bruke dem på forskjellige områder av nettstedet:
add_image_size ('big-thumb', 500, 500);
Nå,
the_post_thumbnail ();
viser en 70x70 miniatyrbilde og
the_post_thumbnail ('big-thumb');
viser en miniatyr på 500x500.
WordPress 3.0 introduserte de etterlengtede egendefinerte menyene, så det er på tide å få brukerne til å tjene penger på denne funksjonen. Etter å ha registrert temastøtte, slik som:
register_nav_menu ('main_nav', __ ('Hovednavigasjonsmeny', 'mytheme'));
... du kan vise en egendefinert meny med wp_nav_menu ():
wp_nav_menu (array ('theme_location' => 'main_nav'));
Vær forsiktig, ettersom systemet lar deg sette inn nestede elementer, noe som kan føre til merkelige resultater hvis du ikke planlegger dem.
Selv om du leverer dropdowns eller navbar stil menyer, er det vanskelig å elegant vise mer enn så mange nivåer av navigering. For å beskytte layoutet må du enten bestemme et nivå under hvilket alle elementene vil vise det samme, eller deaktivere visning av lavere nivåer. For eksempel, for å begrense skjermen til to nivåer, bruk:
wp_nav_menu (array ('depth' => 2));
Dette er en ny funksjon i WordPress 3.0, og det er også det enkleste å implementere. Det er bokstavelig talt en linje:
add_custom_background ();
Det er det! Brukere kan nå velge en tilpasset bakgrunn de vil ha:
I samme ånd, men med litt mer innsats, kan du tillate å endre sidehovedets bakgrunn, og også nettstedets tittelfarge. Denne funksjonen vil ikke fungere med mindre du begynner med å definere en mengde konstanter. Bytt ut 'yourwidth' og 'yourheight' med hvilke målinger som passer ditt tema:
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');
Når dette er på plass, må du skrive funksjonen som vil bruke bakgrunnen til overskriften. Siden det ikke er noen standardoppdatering for en sidehode, kan WordPress ikke gjette hvordan du bruker den nødvendige CSS for deg. For eksempel, for å legge til en tilpasset bakgrunn for diven med «header» -identifikasjonen, gjør du dette:
Du må også opprette en funksjon, si mytheme_admin_preview_header (), for å stille forhåndsvisningspanelet i administrasjonen for å matche det endelige resultatet. Forhåndsvisningsområdet har #headimg-ID, mens nettstedets tittel og nettstedbeskrivelsen har ids av #name og #desc. Eksperimenter med forhåndsvisningen til du er fornøyd. Endelig, for å aktivere Utseende> Overskrift panel, ring:
add_custom_image_header ('mytheme_header_image', 'mytheme_admin_preview_header');
Ikke alle ønsker at bloggen deres skal vises på engelsk. Wrap hver streng brukerne må lese med __ () hvis du ønsker å oversette den, eller _e () hvis du også ønsker å ekko det, som:
__ ('Hello', 'mytheme') _e ('Hello', 'mytheme') // Skriver også den oversatte strengen.
Det andre argumentet bør være en unik identifikator for temaet ditt, slik at forskjellige oversettelser ikke er i konflikt.
Etter at hver streng har pakket inn i en oversettelsesfunksjon, må du bruke makepot.php manus. Den anbefalte måten å skaffe dette skriptet er å installere Subversion, og kjør deretter:
svn co http://svn.automattic.com/WordPress-i18n/tools/trunk
Du vil få en katalog med navnet "trunk" som blant annet inneholder, makepot.php.
Skriptet kjøres slik
php makepot.php wp-tema mytheme
Mytheme er banen til temakatalogen din. Du får en fil med navnet mytheme.pot, som er klar til bruk i et program, for eksempel Poedit for å produsere en .po fil som inneholder en oversettelse.
For å fullføre, må du fortelle WordPress hvor oversettelsene bor i temakatalogen din, for eksempel:
load_theme_textdomain ('mytheme', TEMPLATEPATH. '/ languages');
Her er "mythem" den unike identifikatoren for temaet ditt; Det andre argumentet forteller hvor oversettelsesfilene er. TEMPLATEPATH er en spesiell konstant definert av WordPress som alltid peker på det aktuelle temaets katalog.
Denne er litt valgfri, ettersom du kanskje vil forlate det til brukerens eller andre utvikleres skjønn. Du vil vite at WordPress støtter å legge til egendefinerte felt på hvert innlegg. I mange temaer viser disse feltene vanligvis ikke, med mindre de brukes til en spesiell funksjon. Noen brukere kan være forvirret, fordi de tror at de kan bruke egendefinerte felt for å utføre hvilken som helst informasjon de ønsker.
Det er en funksjon,
the_meta ()
å bli kalt i The Loop, som viser alle egendefinerte felt knyttet til et innlegg, som en uordnet liste i nøkkel: verdivurdering. Ganske vist er det ikke veldig nyttig, men det kan være bedre enn å forlate noen lurer på hvorfor tilpassede felt ikke vises overalt.
En av vanskelighetene ved å tempe et dynamisk system, som WordPress, er at det er mange kantsaker som ikke forekommer for ofte, men det kan fortsatt ødelegge utseendet til nettstedet når de gjør det. Tenk på innlegg med lukkede kommentarer, eller med svært korte organer. Pass på at ingen rare mellomrom kryper inn, eller at elementene ikke er sammenblandet fordi noe ikke vises. Kommentar-delen kan ikke vises hvis kommentarer ikke er tillatt, eller et passordfelt kan erstatte det vanlige innlegget når innlegget er passordbeskyttet..
Også, prøv å matche måten kommentarene er utformet med hoveddelen. Dette siste punktet krever spesiell forsiktighet, for det er generelt mer begrenset plass i kommentarområdet - spesielt når du bruker gjengede kommentarer, og hvert svar er banket til høyre (eller venstre for RTL).
WordPress.org tilbyr en prøve innholdsfil som du kan importere til WordPress-installasjonen, som inneholder et utvalg av testinnlegg, sider og bilder.
For å importere filen i WordPress 3.0, må du først installere WordPress Importer plugin. Velg deretter Verktøy> Importer> WordPress. Pass på at du merker av for «Last ned og importer filvedlegg» når du blir bedt om det. Ellers vil du ikke få bildene knyttet til noen prøveinnlegg.
Etter at importen er fullført, kan du bruke denne sjekklisten for å avgjøre om innholdet vises som det skal.
Vi har lært at ting å se opp for kommer i multple varianter. Noen er sjelden brukte funksjoner, andre er tilpasningsmuligheter, mens andre er mer likte med vanlige designproblemer, som vil gjenta med et hvilket som helst WordPress-nettsted du designer. Vår liste er sikkert langt fra uttømmende, så vi vil høre fra deg i kommentarene! Hva synes du er de mest glemte funksjonene?