Opprette egendefinerte sideskjerm

Sider er svært nyttige når du bruker WordPress som et CMS, og når du lager et nettsted, er det ikke uvanlig at to sider har helt forskjellige layouter. Noen ganger vil en if-setning gjøre tricket; Hvis ikke, trenger du en egendefinert sidemal.


Hvorfor bruke en egendefinert sidemal?

En egendefinert sidemal er en fil i temakatalogen din. Med det kan du endre oppsettet til en side eller vise annerledes innhold til standardsidemalen (page.php). Du kan ha et ubegrenset antall sidemaler, og å velge malen du vil bruke for en bestemt side, er like enkelt som å velge en eksisterende mal fra en rullegardinmeny i WordPress-sideditoren.

Noen ganger kan det være unødvendig å lage en egendefinert sidemal. For eksempel, si din page.php-fil, som brukes til å gjengi alle sidene på nettstedet ditt, har et funksjonsanrop som viser sosiale nettverk-ikoner, slik som:

 

Si at du hadde en "Kontakt" -side på denne nettsiden, og på den siden "Kontakt" du ikke vil vise ikonene for sosiale nettverk. Du kan selvfølgelig opprette en egendefinert sidemaler som heter "Kontakt side", og inkluderer ikke funksjonen for sosiale nettverk ikoner på det. En enklere metode ville imidlertid ganske enkelt være å vikle funksjonsanropet i en if-setning som viste ikonene hvis siden du var på var ikke "Kontakt" -siden, slik som:

 

Det er ofte verdt å vurdere om funksjonaliteten du ønsker, ville være enklere å oppnå ved å bruke et par om setninger.

Et perfekt eksempel på en populær bruk for en tilpasset sidemal er en "full bredde" -side. Et stort flertall av WordPress-maler har to eller tre kolonner: en «hovedinnhold» -kolonne hvor post / sideinnhold holdes, og ett eller to sidebjelker som viser widgets og samtaler til handling. Noen ganger vil en bruker ønske å dra nytte av hele bredden på beholderen de kolonnene holdes innenfor, og velg å utelate sidebar-kolonnen (er) for å øke størrelsen på «hovedinnhold» -kolonnen. Sider som inneholder medier som bildegallerier eller videoer, vil ofte ha nytte av denne typen tilpasset sidemal.

Å lage en egendefinert sidemal kan være en enkel eller vanskelig operasjon, avhengig av hvilken funksjonalitet du har til hensikt å oppnå. Å ha et godt kodet tema hjelper; HTML-elementer blir ofte åpnet i en fil og lukket i en annen, og hvis koden ikke er strukturert eller organisert godt, kan det være en grusom oppgave å bruke egendefinerte sidemaler effektivt.!


Slik oppretter du en egendefinert sidemal

Vær oppmerksom på at disse endringene vil påvirke utformingen av siden din, slik at det kan føre til feil og uregelmessigheter ved å gjøre disse endringene på et levende nettsted. Det er best å øve disse endringene på et privat nettsted, eller etter at du har satt inn nettstedet ditt i en vedlikeholdsmodus. Sikkerhetskopierer dataene dine, bare i tilfelle, er alltid anbefalt.

Alle tilpassede sidemaler Start med følgende kode. Det forteller WordPress at filen er en egendefinert sidemaler, og setter navnet til malen.

 

Selvfølgelig kan "My Custom Page Template" endres til et hvilket som helst navn du liker!

File Naming Convention

Som en side er det best å nevne de tilpassede sidemalenfiler med prefikset 'page_' ('page_contact.php', 'page_fullwidth.php'). Det grupperer alle sidemaler sammen i temakatalogen din.

Jeg tror at den raskeste måten å bli sittende fast i tilpassede sidemaler, er å bare kopiere koden fra din standard page.php-fil til en ny fil, og gjør den nye filen til en tilpasset sidemal. På den måten kan du endre og slette kode og se hvilken påvirkning den har på en side. La oss gjøre det nå!

  1. Opprett en ny fil i katalogen av temaet du bruker, i kodeditoren din. Kaller det 'page_test.php'.
  2. Øverst på filen, sett inn følgende kode:
     
  3. Åpne den eksisterende page.php-filen innenfor temaet du bruker for øyeblikket.
  4. Velg all koden og kopier den til utklippstavlen.
  5. Lim inn den kopierte koden under koden du bare har satt inn
  6. Lagre filen. Last opp det til temakatalogen din hvor det er aktuelt.
  7. Logg inn på WordPress og rediger siden du vil bruke til å prøve den nye sidemalen på (dette kan alltid vende tilbake, og vi vil ikke endre innholdet på selve siden, slik at du ikke mister data lagret på siden).
  8. Under «Sideattributter» (vanligvis funnet på høyre side av redigeringsprogrammet), velg "Test" fra rullegardinmenyen "Mal"..
  9. Oppdater / publiser siden din.

Nå når du ser på siden din, bør den se ut akkurat det samme! Det er fordi vi ikke har gjort noe for å tilpasse vår tilpassede sidemal ennå! Men det er godt å se at siden fortsatt fungerer. Hvis du får en feil, må du passe på at du kopierte koden riktig.

For å bekrefte at siden din bruker den nye siden 'page_test.php' i stedet for 'page.php', slett et stykke kode fra 'page_test.php' ('the_content ();' er vanligvis en god del å slette), lagre deretter (og last opp) den. Oppdater siden på nettstedet ditt, og biten du slettet, mangler. Hvis det er oss, kan du angre endringen du lagde og lagre (og laste opp) på nytt. Hvis ikke, må du kontrollere at du kopierte koden fra denne opplæringen og siden.php-filen på riktig måte.

Herfra er du åpen for en verden av muligheter! Så lenge den 'Template name:' koden forblir øverst på filen, kan du gjøre hva du vil! Sidemalen din trenger ikke å bruke WordPress-syntaks, det kan ganske enkelt være en statisk HTML-mal - alt du liker!


Opprette en tilpasset sidemal for en full bredde

Som en bit av en bonus vil jeg dekke felles trinn involvert i å skape en tilpasset sidemal for full bredde. Disse trinnene kan ikke være nøyaktige basert på koden i temaet ditt, men du bør kunne få tak i det.

Begynn med å opprette en ny fil kalt 'page_fullwidth.php'. Legg til underkoden til toppen, og kopier og lim inn koden fra siden 'page.php' under den, som før.

 

Jeg kommer til å anta at et sted innenfor koden i den filen er følgende:

 get_sidebar ();

Hvis det er tilfelle, fjern det - hver forekomst av det om nødvendig. Hvis det finnes i noen elementer, som div, som kan påvirke oppsettet på siden - slett dem også. En rekke forsøk og feil er ofte involvert i disse tingene hvis du ikke selv opprettet temaet.

Jeg skal også anta at HTML-innholdet på siden begynner med en div som har en CSS-deklarasjon som setter bredden, og kanskje flyter den til venstre eller høyre. I temaene jeg oppretter, vil jeg vanligvis ha en div med et ID for 'pagecontent'. 'venstre', 'innhold' eller 'innlegg' er populære alternativer, men du må undersøke! Til den div, legg til klassen 'fullbredde'. Lagre (og last opp) filen. Ikke glem å også sette en av sidene dine i WordPress for å bruke malen.

Åpne filen 'style.css' i temaet ditt. Fortrinnsvis på et logisk sted, men det spiller ingen rolle (så lenge det ikke forstyrrer andre erklæringer), legg til følgende kode:

 .fullbredde bredde: 100%;

Lagre (og last opp) 'style.css', og last deretter inn siden du tildelte 'Full width'-malen til. Du kan gå tilbake og justere CSS-deklarasjonen om nødvendig, men forhåpentligvis vil kolonnen som inneholder sidens innhold, bli utvidet for å fylle et større område. Hvis det ikke har det, er det helt ned til hvordan temaet ditt er skrevet. Hvis du bruker et premium-tema, kan det være verdt å sjekke dokumentasjonen eller kontakte utvikleren. Ellers kan du legge inn feilsøkingsforespørsler i kommentarene nedenfor, og jeg vil gjøre mitt beste for å gi deg tips.