Share
WordPress est génial. Encore plus impressionnant est le fait qu'il peut être personnalisé pour alimenter tout type de site que vous aimez! Ici, nous allons apprendre à créer une section et une section "derniers messages" - un "incontournable" pour tous les bons thèmes de News / Magazine. Nous allons également utiliser les «champs personnalisés» au maximum de leurs possibilités..
Ce tutoriel couvre le processus de création de la page d'index d'un thème de magazine / news pour WordPress. Les principales fonctionnalités de cette page seront:
Depuis votre répertoire d'installation WordPress, parcourez 'wp-content / themes' et créez un nouveau dossier. Nommez-le comme vous le souhaitez (j'utilise «WordPress Times»). Ensuite, créez 5 nouveaux fichiers:
Ceci est la mise en page de base, nous allons aller pour:
Donc, un document de 940px, avec deux sections:
Contenu à 600px et barre latérale à 300px - une marge de 40px entre les deux.
Ouvrez votre header.php fichier et insérez ce qui suit:
><?php bloginfo('name'); ?> <?php wp_title('-'); ?> En cours de route, nous définissons d’abord le DOCType comme XHTML 1.0 Transitional. Dans la section head, nous définissons ensuite tous les balises méta, les feuilles de style et les titres de page à extraire de WordPress; et nous incluons nos 3 fichiers JavaScript.
Enfin, nous ouvrons une division 'conteneur', et insérons le nom de notre blog comme titre d'en-tête..Étape 3 - Messages de nouvelles
Nous ajouterons un nombre de messages défini par l'utilisateur à partir de la catégorie "Dernières nouvelles" en haut de notre page. Ouvrez index.php et tapez ce qui suit, ne vous inquiétez pas, je vais tout expliquer ci-dessous:
?> )
"title ="">
- #commenting "title =" Voir les commentaires ">
3.1 - Ouverture
La première ligne est une simple fonction PHP WordPress pour inclure notre fichier header.php en premier. En-dessous, nous ouvrons notre div "Content" pour envelopper tous les articles. J'ai inclus un commentaire HTML à la fermeture de chaque balise div indiquant quelle div elle ferme. Je vous recommande fortement de commencer cela dans vos propres projets si vous ne le faites pas déjà, car cela vous aidera à garder votre code aussi organisé que possible..
3.2 - La balise $ more
Ce code nous permet d’inclure uniquement une partie de chaque message jusqu’à ce que l’auteur ait inclus la <--more--> tag - cela empêche tout le texte des longs articles de s'afficher sur la page d'accueil.
3.3 - ID de catégorie
$ break_cat = "83"; $ break_num = "3"; $ latest_num = "4"; $ latest_ignore = "-1";Pour faciliter la personnalisation du thème, nous incluons toutes les options ici. Chaque ligne est commentée. Nous faisons cela de sorte que si quelqu'un d'autre utilise votre thème - au lieu d'avoir à parcourir tout votre code pour trouver où mettre leurs ID de catégorie - ils sont tous facilement accessibles en haut du fichier. Tout au long de ce tutoriel, nous allons utiliser ces variables dans la boucle WordPress.
3.4 - Avons-nous des messages?
Ceci est une variante de la boucle WordPress qui sort nos articles de la base de données. Comme vous pouvez le constater, nous utilisons les deux premières de nos variables de la section ci-dessus. Les variables se substituent à la chaîne qui leur est associée. Par exemple, en utilisant le code par défaut, la ligne deviendrait automatiquement:
query_posts ('showposts = 3 & cat = 83')La deuxième ligne indique ensuite, si nous avons les articles, insérez-les dans la page dans le format indiqué ci-dessous..
3.5 - Contenu du message
"title ="">
Ce n'est pas aussi effrayant qu'il y paraît, croyez-moi.
- Image - Sur notre aperçu de la page d'accueil, vous remarquerez que chaque publication a sa propre image. Ceci est inclus dans la section «Champs personnalisés» de WordPress lors de la rédaction d'un article. Il suffit de régler la clé sur la vignette puis insérez le lien vers l'image:
Le code indique essentiellement "Prenez les données du champ personnalisé de la publication nommé" miniature "et collez-les dans une balise img."
- Titre - Cela insère le titre de notre message comme lien entre les balises h2.. the_permalink () obtient le lien de l'article, et le titre() récupère le titre. Assez simple, hein?
- Date et heure - Ici, nous obtenons l'heure à laquelle la publication a été faite, dans le format de: l, F j, Y G: i - ou en anglais: Jour, Date, Année Heure (par exemple, le samedi 2 août 2008 à 14h27).
- Contenu - Récupère le contenu de la publication jusqu'au (grâce au code que nous avons inclus précédemment). «Continuer…» est le texte affiché à la fin du message. Personnalisez-le comme bon vous semble.
3.6 - Post Meta
- #commenting "title =" Voir les commentaires ">
Ceci récupère la ou les catégories d'où provient le message. S'il y en a plus d'un, ils seront séparés par des virgules. Un lien vers la section des commentaires, et le nombre de commentaires dans l'article est ensuite récupéré.
Ceci ferme simplement le "div.breaking" dans lequel était notre poste; puis ferme la boucle une fois que c'est fait.
Étape 4 - Derniers messages
Au-dessous de nos trois publications "Breaking News", nous inclurons un nombre spécifié de publications récentes, tout en ignorant toutes les publications de la catégorie "Breaking", ainsi que toute autre catégorie spécifiée par l'utilisateur à ignorer. Nous allons ajouter ce qui suit au bas de notre code actuel:
"title ="">
- #commenting "title =" Voir les commentaires ">
4.1 - La boucle
- showposts = '. $ latest_num.' - Indique à la boucle d'afficher uniquement le nombre de publications récentes que l'utilisateur a spécifiées dans la variable '$ latest_num'.
- cat = - '. $ break_cat.', '. $ latest_ignore.' - Ceci indique à la boucle d’ignorer (notez le symbole "moins" que nous demandons à l’utilisateur d’utiliser dans les variables) les publications qui sont dans la catégorie "Décomposition" afin de ne pas dupliquer les publications; et aussi pour ignorer les publications de toutes les catégories spécifiées par l'utilisateur dans la variable '$ latest_ignore'.
Le reste est explicite et identique à celui de Breaking News. Quelques différences sont le manque de 'contenu' section de chaque poste, et aussi l'image du poste est donné la classe de 'postimg-s' au lieu. Cela nous permettra de n’avoir besoin que d’une seule image miniature, que nous redimensionnerons ensuite dans notre CSS de 200x200 à 50x50..
4.2 - Fermeture de la page
Pour terminer la page en cours, nous devons fermer le contenu de div # et inclure notre pied de page:
4.3 - Footer.php
Dans ce fichier, fermez simplement les balises #container, body et html:
Pour le moment, si vous avez créé des articles, votre conception devrait ressembler à ceci:
Assez moche, hein? Eh bien pas pour longtemps.
Ouvrez votre style.css déposer et coller dans le code suivant:
/ * ---------------------------------------------------- ------------------------ Nom du thème: WordPress Times URI du thème: http://www.vivawp.com/ Description: Un tutoriel pour NETTUTS.com par Dan Harper Version: 1.00 Auteur: Dan Harper URI de l'auteur: http://danharper.me ------------------------------ ------------------------------------------ * /
Ceci est obligatoire en haut de ce fichier, car il fournit au gestionnaire de thèmes de WordPress des informations sur votre thème. Remplissez les sections comme vous le souhaitez.
Vous trouverez ci-dessous tout le code CSS utilisé pour styliser le document. Il est documenté ci-dessous.
* margin: 0; padding: 0; body background-color: # faf9f5; couleur: # 3d3d3d; taille de police: 75%; famille de polices: "Helvetica Neue", Helvetica, Arial, sans-serif; #container width: 940px; marge: auto 15px; h1, h2, h3, h4, h5, h6 font-family: Géorgie, "Times New Roman", Times, empattement; TYPOGRAPHIE CSS BLUEPRINT CSS * / h1, h2, h3, h4, h5, h6 0.5em; h2 taille de police: 2em; margin-bottom: 0.75em; h3 taille de police: 1.5em; hauteur de ligne: 1; margin-bottom: 1em; h4 taille de police: 1.2em ; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; h5 taille de la police: 1em; taille de la police de caractère: gras; margin-bottom: 1.5em; h6 taille de la police: 1em; poids de la police de caractères: gras; h1 img, h2 img, h3 img, h4 img, h5 img, h6 img marge: 0; p marge: 0 0 1,5em; em; ul, ol margin: 0 1.5em 1.5em 1.5em; / * / TYPOGRAPHIE CSS CSS * / h1 # en-tête margin-bottom: 20px; #content width: 600px; float: gauche; .breaking, .recent padding: 10px; bordure: solide 1px # 3d3d3d; marge inférieure: 15 px; .postimg float: right; largeur: 200px; hauteur: 200px; rembourrage en bas: 10px; .postimg-s float: right; largeur: 50px; hauteur: 50px; rembourrage en bas: 10px; .breaking h2 font-size: 2.5em; hauteur de ligne: 1em; marge inférieure: 0px; .construire h2 a, .recent h3 a text-decoration: none; couleur: # 3d3d3d; .breaking h2 a: survol, .recent h3 a: hover text-decoration: underline; p.datetime font-style: italic; taille de police: 0.9em; / * POST META * / .postmeta margin: -10px; rembourrage: 4px; couleur de fond: # dedbd1; clarifier les deux; .postmeta p margin: 0; padding-left: 6px; text-transform: majuscule; poids de police: gras; .postmeta span.comm font-weight: normal; .postmeta a: lien, .postmeta a: visité color: # 3d3d3d; texte-décoration: aucun; .postmeta a: survol, .postmeta a: actif text-decoration: underline; #sidebar width: 300px; marge gauche: 620px;
La page va maintenant ressembler à ceci. Beaucoup plus propre!
Félicitations. Vous avez réussi à créer les bases de la page de couverture d'un thème d'actualités pour WordPress, ainsi que d'un espace de publication en vedette: un élément indispensable pour les thèmes d'actualités. Vous pouvez également rester en avance sur la concurrence avec vos options de personnalisation simples à l'aide des variables PHP..
Ne manquez pas le lancement de vivaWP, une nouvelle famille de thèmes WordPress Premium à la mi-août. Notre premier thème, CocoaNews, partage une partie du code de base présenté tout au long de ce didacticiel.
Accentsconagua
?> )
