Share
WP_Query is een krachtig hulpmiddel om te bepalen wat er uit je lus komt. Vandaag ga ik je alles leren hoe je het kunt gebruiken om een 3-columned kranten-thema te maken met al je hoofdblogposten in de hoofdkolom en aan de zijkant een aantal berichten met een bepaalde categorie. We zullen de gebruiken 960 CSS-raamwerk voor de basis lay-out en reset van ons thema, zal het een hoop werk hakken van wat nodig is!
Ons aanvalsplan is om alle berichten met een gedeelde toegewezen categorie te verwijderen, en
plaats ze opzij van de hoofdposten. We zullen ook naar een methode kijken
voor het maken van een 'featured post' zonder jQuery of JavaScript te gebruiken! Ik heb ook een .psd gegooid (met behulp van de sjablonen die je bij download hebt) van wat
we willen vandaag bereiken. Download de .psd hier.
We gaan ervan uit dat u een live WordPress-installatie hebt, ongeacht of deze lokaal of gehost is. Als je daar wat hulp bij nodig hebt, is het de moeite waard eerst te leren hoe je WordPress lokaal op Windows of OS X installeert.
Alrighty. Dus afgezien van de overduidelijke behoefte aan een WordPress-installatie, gaan we
om nog een paar extra dingen nodig te hebben. Ik heb een heleboel bestanden die je nodig hebt
hebben in je themamap.
Heb je dat allemaal? Goed. Je zou nu klaar moeten zijn voor de rest van de tutorial! Vergeet niet
om het thema te activeren in WP-admin (wp-admin / themes.php).
Ik ga je nog niet alle WordPress-code geven. Ik ga je geven
alle WordPress-code die u nodig hebt, met uitzondering van de WP_Query's. Ze zullen een stap in doen
van henzelf, omdat ze zeker uitleg nodig hebben! Het zou ook de pagina WEG vullen
veel, dus ik heb het allemaal in een .txt opgenomen in plaats van hier.
Download het en kopieer het naar index.php. Of typ het, wat het ook uitkomt. Typen
helpt je herinneren wat je doet!
Dat is een heleboel code om te verwerken, dus ik zal gewoon de interessante delen eruit halen
voor jou, en leg ze uit.
Dus ik wed dat je al deze kleine 'grid_5' en 'container_12' klassen opmerkt en
gaan, wat is dat nou? Laat me het je uitleggen. Het nummer na 'grid_'
is het aantal kolommen dat we willen dat div selecteert. Omdat we 12 kolommen willen,
we verpakken het hele ding (met div # wrapper) met de klasse 'container_12'.
In de standaard CSS die ik je heb gegeven, heeft deze de invoer voor de drie 960-bestanden,
dus we hebben al een halve lay-out als we helemaal geen CSS hebben gecodeerd!
Dit ziet er niet al te opzichtig uit. Het is niet gestileerd en heeft zelfs geen inhoud:
Dit is waar alle magie gebeurt! Wij hebben drie WP_Querys:
Dus we willen een kolom met WordPress-inhoud uit slechts één categorie. Hoe doen we
doe dat? De ... gebruiken groot reeks parameters die WP_Query ons biedt
met, het is gemakkelijk om dit te doen. Vervang de hunNews-opmerking in index.php door:
zoekopdracht (categorie_naam = theirNews & showposts = 7); while ($ theirNews-> have_posts ()): $ theirNews-> the_post (); ?>
Query! Laten we er meteen in springen.
We hebben een specifieke luscode nodig.
Lees het volledige artikel '); ?>
Gewoon de titel ingepakt in a h4 tag, met de inhoud ingepakt in een div
geklasseerde 'invoer'. Super goed! Je hebt je eerste WP_Query uit de 3 gedaan, dat zou wel moeten
toon nu alleen categorieën met de naam 'hunNieuws'
We willen alleen 1 bericht laten zien, dat heeft niet de categorie 'hun nieuws'. 1 maar.
Omdat je nu de basisprincipes van WP_Query begrijpt, zal ik je de volledige code geven
(vervang de FEATURED POST-opmerking door):
vraag ( 'showposts = 1 & cat = -59'); while ($ featured-> have_posts ()): $ featured-> the_post (); ?> Geplaatst onder .
Deze is onze featured post, dus ik heb toepasselijk de div 'featuredPost' genoemd,
maar omdat we straks ook stijlen van reguliere posts willen hebben, heb ik de
klasse 'post'.
Dezelfde deal met de WP_Query. Deze keer tonen de parameters slechts 1 berichten die dat niet zijn
uit de categorie 59. Categorie 59 is de ID van de categorie 'hunNieuws'. ik heb nodig
om je te vertellen hoe je het kunt krijgen!
Kijk hoe het werkt & Cat_id = 59 aan het einde? Dit is je categorienummer.
De mijne is 59, zorg ervoor dat u deze wijzigt in de ID van uw 'hunNieuws'-categorie!
Het verschil met de aanbevolen post is voornamelijk de h2. Omdat het de
op een na grootste koptekst op de pagina. Verderop in de 'hunNieuws'-sectie wikkelden we ons in
in in a h4 element, omdat het na de hoofdkolom de
volgende koptekst op de pagina. Alles ter styling.
Onze laatste WP_Query. Deze zal zijn allemaal berichten met uitzondering van geplaatste berichten
door de 'hunNieuws'-categorie (je hebt de ID nodig. De mijne was 59, kan je de jouwe herinneren?).
Maar omdat we al het eerste bericht in het algemeen weergeven (de functie
post), we willen het niet nog een keer laten zien, toch? Dus we moeten de berichten compenseren met
1 - eenvoudig te maken met de krachtige parameters van WP_Query. Vervang de MAIN WP QUERY-opmerking
in index.php met dit:
zoekopdracht (posts_per_page = 5 & offset = 1 & cat = -59 '); while ($ main-> have_posts ()): $ main-> the_post (); ?>Geplaatst onder .Lees het volledige artikel '); ?>
Dat is dus alle HTML- en WordPress-code die we nodig hebben. Het ziet er nog steeds standaard uit, maar
het zal de algemene indeling met 3 kolommen hebben die we zoeken!
Nu, omdat al onze lay-out vrijwel klaar is, is het voornamelijk alleen styling dat is
nodig zijn! Download
al deze CSS, en plak het in je style.css. Er zijn een paar dingen die
overschrijven de standaard 960-code. We hoeven het niet te gebruiken !BELANGRIJK omdat
de nieuwe code staat eigenlijk hoger op de hiërarchische ladder dan de 960-code. Wij
gebruik de 960-code als een soort 'basis' waaruit we bouwen. Als je de
fundamenten van een huis, zie je nog steeds de ruwe fundamenten? Deze 'decoratie'
is voornamelijk op kopteksten, maar sommige algemene opmaak wordt gebruikt voor tekstinhoud enz. Een
belangrijke overschrijving is het hoofdlettertype. We specificeren Georgia, wanneer de standaard is
Helvetica. Lettertypen zijn helemaal naar jouw voorkeur, ik heb zojuist Georgië gebruikt
anders! Nadat je alle CSS hebt geplakt en gelezen, zou de voorpagina dat moeten doen
zie er compleet uit!
Ik neem alleen dit gedeelte op, dus ik krijg geen ontelbare vragen waarin ik vraag waarom het individu is
pagina's retourneren de informatie die op de hoofdpagina zou moeten staan! Zo onze inhoudsopgave
pagina heeft 3 kolommen - Maar wat zou je 3 kolommen invullen in een specifieke single
pagina? Wat je wilt! Hoewel ik de inhoud van de post zou voorstellen ... Dus ik ga
om uit te leggen hoe page.php en single.php werk, voor het geval u
wil het thema verlengen. Als u index.php in header, sidebar en wilt splitsen
voettekst, doe dat nu! Anders stomen we verder:
Dus nu zou je een lege hoofdkolom moeten hebben. We gaan dit vullen met a
normale lus:
Geplaatst onder .
Naw ... De gewone oude saaie lus. Voel je vrij om deze enkele pagina naar wat dan ook te vuren
u wil dat uw afzonderlijke berichten er uitzien. Dit levert de basis
sjabloon voor WordPress om één bericht weer te geven.
Dus dat is een enkele post, maar we hebben nog steeds links naar single pagina's in de
navigatie en voettekst. Als u erop klikt, keren ze hetzelfde terug als de index.
Niet cool. Het enige wat we echter moeten doen, is alles kopiëren van single over naar page.php,
en het zou zoet moeten zijn. Makkelijk he? Deze pagina's zouden er ongeveer zo uit moeten zien:
Dus je hebt net een glimp opgevangen van wat WP_Query kan doen. Ik raad ten sterkste aan om te bezoeken
de Documenten-pagina Query-berichten, die dezelfde parameters heeft als WP_Query. Je kunt je lus verfijnen tot elke specifieke post met elke combinatie van de parameters gescheiden door een
&.
Ik hoop dat jullie net zoveel plezier hebben gehad als ik een krantenkijkend thema heb gemaakt!
Je kunt het uiteindelijke product hier bekijken! Genieten!
Accentsconagua