Cum sa faci un carusel postat recomandat pentru WordPress

Este din ce în ce mai frecvent ca blogurile să aibă anumite postări în partea de sus a paginii. În acest tutorial, vă vom arăta cum să implementați acest lucru în WordPress. Vom folosi tema prestabilită, Kubrik, ca temă de bază, dar ar trebui să fie adaptabilă la majoritatea temelor, cu unele modificări. Codul este foarte mic și postările sunt simple.

Pentru ce tragem

Vom modifica tema Kubrik care vine preambalată în WordPress pentru a putea posta postări în partea de sus a paginii. Acest tutorial a fost testat numai pe WordPress 2.5.x dar ar trebui să funcționeze și pe seria 2.3.x. Vom presupune că utilizați 2.5.x sau mai mult. Până la sfârșitul tutorialului, veți avea ceva de genul:

Pasul 1 - Crearea imaginii implicite

Înainte de a face ceva, mergeți la dosarul tematic al instalării WordPress (wp-content / themes /) și faceți o copie de rezervă a dosarului "implicit". Aceasta este tema Kubrik pe care o vom edita. Spațiul de salvare este în cazul în care doriți să reveniți la tema originală, nemodificată.

În primul rând, vom face o imagine implicită în cazul în care nu este specificată nicio imagine postată. Să o păstrăm dulce și simplu pentru acest tutorial. Deschideți editorul preferat de imagine și creați un dreptunghi de 233x130px cu colțuri rotunjite în raza de 10px. Am făcut fundalul unui gradient radial alb și gri și am pus un text pe partea de sus. Aceasta este ceea ce am:

Salvați imaginea ca "no-featured-image.jpg" în directorul "images" din directorul "implicit".

Pasul 2 - Adăugați codul PHP

Acum pentru cod. Deschideți fișierul "header.php" din dosarul "implicit". La sfârșitul fișierului, veți vedea un bloc div și o etichetă hr ca acesta:

/ ">


Între tag-ul div terminator și h, introduceți următorul cod:

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

Acest cod va afișa trei imagini într-o listă neordonată. Fiecare imagine este un link către o postare recomandată. Vom vorbi despre modul de configurare a codului după ce adăugăm CSS.

Pasul 3 - Stil cu CSS

Apoi trebuie să adăugăm câteva stiluri CSS. Deschideți fișierul "style.css" și plasați următorul cod de mai jos la sfârșitul fișierului. Toate acestea fac este să plutească elementele listă spre stânga și să le distanțezi uniform.

/ * Caruselul recomandat postat * / #featured umplutura: 10px 10px 0 20px;  #carousel style-style: none; marja: 0; umplutura: 0;  #carousel li float: stânga; umplutura: 0; margin-dreapta: 10px; 

Pasul 4 - Înțelegerea codului

Să aruncăm o privire la ceea ce face codul pe care l-am adăugat. În interiorul containerului div (id = "featured") avem o listă neordonată și un cod PHP pentru a genera elemente de listă.

$ featured_posts = get_posts ('numărulposts = 3 & categorie =1„);

Primul rând prezentat mai sus preia informațiile postare folosind funcția get_posts () și atribuie datele postate variabilei $ featured_posts. Funcția get_posts () exceptează un singur parametru sub forma unui șir de interogări similar cu cel pe care l-ați putea vedea la sfârșitul unei adrese URL (fără semnul întrebării inițiale). Primul parametru este "numărul de posturi" pe care le-am setat la 3 pentru acest tutorial. Acest parametru stabilește câte postări recomandate vom fi afișate. Al doilea parametru este "categoria" pe care am setat-o ​​la 1. Valoarea parametrului "categorie" ar trebui să fie ID-ul categoriei pe care o utilizați pentru postările dvs. recomandate. Puteți găsi codul unei categorii accesând pagina de gestionare a categoriilor și plasând mouse-ul peste un titlu de categorie. Bara de stare va afișa o legătură. Ultimul număr este ID-ul categoriei.

Următoarea linie este o buclă de foreach care va trece prin posturile pe care le-am recuperat folosind funcția get_posts (). Prima linie din bucla foreach returnează URL-ul imaginii utilizând funcția get_post_custom_values ​​() și stochează adresa URL în variabila $ custom_image. Primul parametru specifică cheia valorii personalizate pe care o folosim, "featured_image". Al doilea parametru specifică ce post de la care obținem valoarea.

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

În următoarea linie, efectuăm o verificare rapidă pentru a vedea dacă într-adevăr a fost specificată o imagine. Dacă nu a fost specificată nicio imagine, asignăm variabila imagine $ URL-ul imaginii implicite. Dacă a fost specificată o imagine, folosim asta.

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

În ultima linie vom scoate efectiv elementele listate. Fiecare element este o imagine care face legătura cu postul recomandat.

printf (“
  • % s
  • ', get_permalink ($ post-> ID), $ post-> post_title, $ imagine, $ post-> post_title);

    Pasul 5 - Crearea posturilor recomandate

    Asta e! Acum, ori de câte ori doriți să includeți o postare, alocați-o categoriei recomandate și creați o valoare particularizată cu o cheie "featured_image" și o valoare a adresei URL a imaginii. Imaginile ar trebui să fie de 233x130px.

    A se vedea în acțiune

    Puteți vizualiza tema în acțiune pe serverul NETTUTS WordPress Demo:




    Cod