Share
WordPress is geweldig. Nog mooier is het feit dat het kan worden aangepast aan elk type site dat u leuk vindt! Hier zullen we leren hoe je een featured en "latest posts" gedeelte kunt maken - gemakkelijk een 'must-have' voor alle goede Nieuws / Magazine-thema's. We zullen ook de 'Aangepaste velden' volledig benutten.
Deze tutorial behandelt het proces van het maken van de indexpagina van een tijdschrift / nieuwsthema voor WordPress. De belangrijkste kenmerken van deze pagina zijn:
Blader vanuit uw WordPress installatiedirectory door 'wp-content / themes' en maak een nieuwe map aan. Noem het hoe je wilt (ik gebruik 'WordPress Times'). Maak vervolgens 5 nieuwe bestanden:
Dit is de basisindeling waar we voor gaan:
Dus een 940px-document, met twee secties:
Inhoud op 600px & Sidebar op 300px - met een marge van 40px tussen de twee.
Open je header.php bestand en voeg het volgende in:
><?php bloginfo('name'); ?> <?php wp_title('-'); ?> Als we dit doorlopen, definiëren we eerst het DOCType als XHTML 1.0 Transitional. In de kopsectie stellen we vervolgens alle metatags, stylesheets en paginatitels in die uit WordPress moeten worden opgehaald; en we nemen onze 3 JavaScript-bestanden op.
Ten slotte openen we een 'container'-divisie en voegen we de naam van onze blog in als koptitel.Stap 3 - Berichten 'breaking news'
We zullen een door de gebruiker gedefinieerd aantal berichten uit een categorie 'Brekend nieuws' boven aan onze pagina opnemen. Open index.php en typ het volgende, maak je geen zorgen, ik zal het hieronder allemaal uitleggen:
?> )
"title ="">
- #commenting "title =" Opmerkingen bekijken ">
3.1 - Opening
De eerste regel is een eenvoudige WordPress PHP-functie om eerst ons header.php-bestand op te nemen. Daaronder openen we onze 'Content'-div om alle berichten samen te voegen. Ik heb een HTML-opmerking toegevoegd bij het sluiten van elke div-tag met vermelding van welke div-naam wordt gesloten. Ik raad iedereen aan om dit in je eigen projecten te doen als je dat nog niet doet, omdat het helpt om je code zo georganiseerd mogelijk te houden.
3.2 - De tag $ more
Met deze code kunnen we slechts een deel van elk bericht opnemen tot waar de auteur het heeft opgenomen <--more--> tag - hiermee stopt alle tekst in lange berichten van weergave op de startpagina.
3.3 - Categorie-ID's
$ breaking_cat = "83"; $ breaking_num = "3"; $ latest_num = "4"; $ latest_ignore = "-1";Om het thema gemakkelijker te kunnen aanpassen, nemen we hier alle opties op. Elke regel wordt verder becommentarieerd. We doen dit zodat als iemand anders je thema gebruikt - in plaats van al je code te doorzoeken om te vinden waar de categorie-ID's moeten worden gezet - ze allemaal eenvoudig toegankelijk zijn bovenaan het bestand. In deze zelfstudie gebruiken we deze variabelen in de WordPress-lus.
3.4 - Hebben we berichten?
Dit is een variatie op de WordPress-lus die onze berichten uit de database uitvoert. Zoals u kunt zien, gebruiken we de eerste twee van onze variabelen uit het bovenstaande gedeelte. De variabelen vervangen zichzelf door de bijbehorende string. Als u bijvoorbeeld de standaardcode gebruikt, wordt de regel automatisch:
query_posts (showposts = 3 & cat = 83)De tweede regel zegt dan, als we de berichten hebben, plaats ze dan in de pagina in het hieronder geschetste formaat.
3.5 - Inhoud plaatsen
"title ="">
Dit is niet zo eng als het lijkt, geloof me.
- Beeld - Op onze startpagina ziet u dat elk bericht een eigen afbeelding heeft. Dit is opgenomen in de sectie "Aangepaste velden" van WordPress bij het schrijven van een bericht. Stel simpelweg de 'sleutel' in op thumbnail plaats dan de link naar de afbeelding:
De code zegt in feite: "Neem de gegevens uit het aangepaste veld van de post met de naam 'thumbnail' en plak het in een img-tag."
- Titel - Hiermee wordt onze berichttitel ingevoegd als een koppeling tussen h2-tags. the_permalink () krijgt de link van het bericht, en de titel() haalt de titel op. Vrij eenvoudig, he?
- Datum Tijd - Hier krijgen we de tijd dat het bericht is gemaakt, in het formaat van: l, F j, Y G: i - of in het Engels: Dag, Datum, Jaar Tijd (bijvoorbeeld zaterdag, 2 augustus 2008 14:27).
- Inhoud - Haalt de inhoud van de post op tot (dankzij de code die we eerder hebben opgenomen). 'Doorgaan ...' is de tekst die wordt weergegeven aan het einde van het bericht. Pas dit echter aan zoals je wilt.
3.6 - Plaats Meta
- #commenting "title =" Opmerkingen bekijken ">
Hiermee wordt de categorie (s) opgehaald waarvan het bericht afkomstig is. Als er meer dan één is, worden ze gescheiden door komma's. Een koppeling naar de opmerkingensectie en het aantal reacties in het artikel wordt vervolgens opgehaald.
Dit sluit simpelweg de "div.breaking" waar onze post in was; en sluit vervolgens de lus zodra deze is voltooid.
Stap 4 - Laatste berichten
Onder onze drie 'Breaking News'-berichten zullen we een door de gebruiker opgegeven aantal laatste berichten opnemen, terwijl we berichten uit de categorie' Breaking 'en alle andere door de gebruiker opgegeven categorieën negeren om te negeren. We voegen het volgende toe aan de onderkant van onze huidige code:
"title ="">
- #commenting "title =" Opmerkingen bekijken ">
4.1 - De lus
- showposts = '$ latest_num.' - Vertelt de lus om alleen het aantal recente berichten weer te geven die de gebruiker heeft opgegeven in de variabele '$ latest_num'.
- cat = - '$ breaking_cat. '' $ latest_ignore..' - Dit geeft de lus opdracht om te negeren (let op het 'minteken' dat we van de gebruiker nodig hebben om in de variabelen te gebruiken) berichten die in de categorie 'Breken' staan om geen berichten te dupliceren; en ook om berichten te negeren van een van de categorieën die de gebruiker opgeeft in de variabele '$ latest_ignore'.
De rest is vanzelfsprekend en hetzelfde als de functie Brekend nieuws. Een paar verschillen zijn het ontbreken van de 'inhoud' sectie van elk bericht, en ook de postafbeelding krijgt de klasse van 'Postimg-s' in plaats daarvan. Hierdoor hebben we slechts één miniatuurafbeelding nodig - die we vervolgens in onze CSS verkleinen van 200x200 tot 50x50.
4.2 - De pagina sluiten
Om de huidige pagina te beëindigen, moeten we de # div-inhoud sluiten en ons voetgedeelte toevoegen:
4.3 - Footer.php
In dit bestand sluit u gewoon de #container-, body- en html-tags:
Op dit moment zou je ontwerp er ongeveer zo uit moeten zien als je wat berichten hebt gemaakt:
Best lelijk, toch? Nou, niet voor veel langer.
Open je style.css bestand en plak in de volgende code:
/ * ------------------------------------------------ ------------------------ Theme Name: WordPress Times Theme URI: http://www.vivawp.com/ Beschrijving: een tutorial voor NETTUTS.com door Dan Harper Versie: 1.00 Auteur: Dan Harper Auteur URI: http://danharper.me ------------------------------ ------------------------------------------ * /
Dit is vereist aan de bovenkant van dit bestand, omdat het de themamanager in WordPress wat informatie over uw thema geeft. Vul de secties erin in zoals je wilt.
Hieronder staat alle CSS-code die is gebruikt voor het stylen van het document. Het is hieronder gedocumenteerd.
* margin: 0; padding: 0; body background-colour: # faf9f5; kleur: # 3d3d3d; font-size: 75%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; #container width: 940px; marge: 15px auto; h1, h2, h3, h4, h5, h6 font-family: Georgia, "Times New Roman", Times, serif; / * BLAUWDRUK CSS TYPOGRAFIE * / h1, h2, h3, h4, h5, h6 font-weight: normaal; kleur: # 111; h1 font-size: 3em; regelhoogte: 1; margin-bottom: 0,5em; h2 font-size: 2em; margin-bottom: 0.75em; h3 font-size: 1.5em; line-height: 1; margin-bottom: 1em; h4 font-size: 1.2em ; regelhoogte: 1,25; margebodem: 1,25 m; hoogte: 1,25 m; h5 font-size: 1em; font-weight: bold; margin-bottom: 1,5em; h6 font-size: 1em; font-weight: bold; h1 img, h2 img, h3 img, h4 img, h5 img, h6 img margin: 0; p margin: 0 0 1.5em; li ul, li ol margin: 0 1.5 em; ul, ol margin: 0 1.5em 1.5em 1.5em; / * / BLUEPRINT CSS TYPOGRAFIE * / h1 # header margin-bottom: 20px; #content width: 600px; zweven: links; .breaking, .recent padding: 10px; rand: 1px vast # 3d3d3d; margin-bottom: 15px; .postimg float: right; breedte: 200 px; hoogte: 200 px; padding-bottom: 10px; .postimg-s float: right; breedte: 50px; hoogte: 50px; padding-bottom: 10px; .breaking h2 font-size: 2.5em; regelhoogte: 1em; margin-bottom: 0px; .breaking h2 a, .recent h3 a text-decoration: none; kleur: # 3d3d3d; .breaking h2 a: hover, .recent h3 a: hover text-decoration: underline; p.datetime font-style: italic; lettergrootte: 0.9em; / * POST META * / .postmeta margin: -10px; opvulling: 4px; achtergrondkleur: # dedbd1; beiden opschonen; .postmeta p margin: 0; padding-links: 6px; text-transform: hoofdletters; lettertype: vet; .postmeta span.comm font-weight: normaal; .postmeta a: link, .postmeta a: visited color: # 3d3d3d; tekstdecoratie: geen; .postmeta a: hover, .postmeta a: active text-decoration: onderstrepen; #sidebar width: 300px; marge links: 620 px;
De pagina zal er nu als volgt uitzien. Veel schoner!
Proficiat. Je hebt met succes de basis voor de voorpagina van een nieuwsthema voor WordPress gemaakt, compleet met een Featured post-gebied - een 'must-have' als het gaat om Nieuws-thema's. Je kunt de concurrentie ook voorblijven met je eenvoudige aanpassingsopties met behulp van de PHP-variabelen.
Pas op voor de lancering van vivaWP - een nieuwe familie van Premium WordPress-thema's die half augustus verschijnen. Ons eerste thema, CocoaNews, deelt een deel van de basiscode die in deze zelfstudie wordt getoond.
Accentsconagua
?> )
