Het komt steeds vaker voor dat blogs bepaalde berichten boven aan de pagina bevatten. In deze zelfstudie laten we u zien hoe u dit in WordPress kunt implementeren. We gebruiken het standaardthema, Kubrik, als ons basisthema, maar het zou aan sommige thema's moeten kunnen worden aangepast met enige aanpassingen. Er is heel weinig code en het gebruik van berichten is eenvoudig.

Waarop we schieten

We gaan het Kubrik-thema dat voorverpakt wordt in WordPress aanpassen om berichten boven aan de pagina te kunnen weergeven. Deze tutorial is alleen getest op WordPress 2.5.x maar zou ook in de 2.3.x-serie moeten werken. We gaan ervan uit dat je 2.5.x of hoger gebruikt. Aan het einde van de zelfstudie hebt u ongeveer zoiets als dit:

Stap 1 - De standaard afbeelding maken

Voordat we iets doen, gaat u naar de themamap van uw WordPress-installatie (wp-content / themes /) en maakt u een back-up van de map "default". Dit is het Kubrik-thema dat we gaan bewerken. De back-up is bedoeld voor het geval u terug wilt gaan naar het oorspronkelijke, ongewijzigde thema.

Ten eerste gaan we een standaardafbeelding maken in het geval dat geen aanbevolen postafbeelding is opgegeven. Laten we het eenvoudig houden voor deze tutorial. Open uw voorkeursafbeeldingseditor en maak een rechthoek van 233x130px met afgeronde hoeken met 10px radius. Ik heb de achtergrond een wit tot grijs radiaal verloop gemaakt en een beetje tekst erop geplaatst. Dit is wat ik heb:

Sla de afbeelding op als "no-featured-image.jpg" in de map "images" in de map "default".

Stap 2 - Voeg de PHP-code toe

Nu voor de code. Open het bestand "header.php" in de map "default". Aan het einde van het bestand ziet u een div-blok en een hr-tag als volgt:

 
 
/ ">
 
 
 
 

Tussen de laatste div-tag en de uur, voert u de volgende code in:

 
 ID KAART); $ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg"; printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title); ?> 
 
 

Deze code voert drie afbeeldingen uit in een ongeordende lijst. Elke afbeelding is een link naar een aanbevolen bericht. We zullen het hebben over hoe we de code moeten configureren nadat we de CSS hebben toegevoegd.

Stap 3 - Stijl met CSS

Vervolgens moeten we enkele CSS-stijlen toevoegen. Open het bestand "style.css" en plaats de onderstaande code aan het einde van het bestand. Dit alles doet de lijstelementen naar links zweven en gelijkmatig spreiden.

/ * Featured Post Carousel * / #featured opvulling: 10px 10px 0 20px;  #carousel lijststijl: geen; marge: 0; opvulling: 0;  # carousel li float: left; opvulling: 0; margin-right: 10px; 

Stap 4 - De code begrijpen

Laten we eens kijken naar de code die we hebben toegevoegd. Binnen de container div (id = "featured") hebben we een ongeordende lijst en een PHP-code om lijstelementen te genereren.

$ featured_posts = get_posts ('numberposts = 3 & category =1');

De eerste regel hierboven toont de berichtinformatie met de functie get_posts () en wijst de postgegevens toe aan de variabele $ featured_posts. De functie get_posts () met uitzondering van een enkele parameter in de vorm van een querytekenreeks die lijkt op wat u aan het einde van een URL zou kunnen zien (zonder het beginvraagteken). De eerste parameter is 'nummerpalen' die we voor deze zelfstudie hebben ingesteld op 3. Deze parameter bepaalt hoeveel featured berichten we zullen laten zien. De tweede parameter is 'categorie' die we hebben ingesteld op 1. De waarde van de parameter 'categorie' moet de ID zijn van de categorie die u gebruikt voor uw aanbevolen berichten. Je kunt de ID van een categorie vinden door naar de categoriebeheerpagina te gaan en met de muis over een categorietitel te bewegen. De statusbalk toont een link. Het laatste nummer is de categorie-ID.

De volgende regel is een foreach-lus die door de berichten gaat die we hebben opgehaald met de functie get_posts (). De eerste regel binnen de foreach-lus haalt de URL van de afbeelding op met de functie get_post_custom_values ​​() en slaat de URL op in de variabele $ custom_image. De eerste parameter geeft de sleutel aan van de aangepaste waarde die we gebruiken, "featured_image". De tweede parameter geeft aan vanaf welk bericht de waarde wordt opgehaald.

$ custom_image = get_post_custom_values ​​('featured_image', $ post-> ID);

In de volgende regel controleren we snel of een afbeelding inderdaad is opgegeven. Als er geen afbeelding is opgegeven, wijzen we de variabele $ image toe aan de URL van de standaardafbeelding. Als een afbeelding is opgegeven, gebruiken we die.

$ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg";

In de laatste regel voeren we de lijstelementen daadwerkelijk uit. Elk element is een afbeelding die linkt naar het aanbevolen bericht.

printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title);

Stap 5 - Aanbevolen berichten maken

Dat is het! Telkens wanneer u een bericht wilt plaatsen, wijst u het toe aan de gekenmerkte categorie en maakt u een aangepaste waarde met een sleutel van "featured_image" en een waarde van de afbeeldings-URL. Afbeeldingen moeten 233x130 px zijn.

Zie het in actie

U kunt het thema in actie bekijken op onze NETTUTS WordPress Demo-server: