Share
Tout au long de cette série en six parties, du débutant au maître, nous utiliserons les fonctionnalités avancées de WordPress pour créer notre propre portfolio et blog, avec une page d'options, plusieurs styles et la prise en charge des nouvelles fonctionnalités de WordPress 2.7. Aujourd'hui, nous lions tout ensemble.
Dans la dernière partie de WordPress Week, nous créons un widget personnalisé de base avant de terminer en donnant Innovation un peu de chirurgie plastique avec un schéma de couleurs alternatif.
Il y a encore plusieurs éléments de texte que nous n'avons pas encore stylés et par conséquent qui ne semblent pas corrects, tels que les légendes d'images, blockquote, pré, code et adresse.
Ajouter ce qui suit à style.css:
p.wp-caption-text taille de la police: 0.8em; style de police: italique; blockquote font-size: 0.9em; marge: 15px 0 15px 15px; rembourrage: 0 15px; pre font-family: "Courier New", Courier, monospace; taille de police: 0.9em; marge: 10px 0 20px 0; code background-color: #efefef; couleur: # 000; famille de polices: "Courier New", Courier, monospace; taille de police: 1em; marge: 0 3px; rembourrage: 0 3px; adresse taille de la police: 0.9em; famille de polices: Georgia, "Times New Roman", Times, serif; hauteur de ligne: 1.5em; marge inférieure: 15 px;
Et cela dans deepblue.css:
p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed;
Nous allons créer un widget (ci-dessous) qui affichera les cinq derniers articles du blog - la première image associée au message étant redimensionnée et utilisée comme image d'aperçu..
Il est conçu pour être utilisé sur le widget de la page d'accueil.
Le widget est essentiellement une boucle WordPress personnalisée appelée à partir d’une fonction qui le transforme en widget.
À l'intérieur de / inc / dossier créer un fichier nommé bloglist-widget.php et lancez-le avec ce qui suit:
du blog
La boucle entière est enveloppée dans une nouvelle fonction articles récents () (vous pouvez le nommer comme vous voulez). Sur les deux lignes suivantes, nous enregistrons deux objets en tant que "globaux" - cela nous permet d’accéder à la base de données WordPress ($ wpdb) et poster ($ post) classes à l'intérieur du widget. Ensuite, nous incluons le var.php fichier.
Suivant:
Une boucle personnalisée normale, à l’exclusion de la catégorie de portefeuille, limitée à cinq postes et caller_get_posts = 1 est un nouveau paramètre dans WP 2.7 qui définit la boucle pour ignorer les anciens posts 'Stickied'.
Maintenant ça devient intéressant:
Accentsconagua
des postes . "WHERE post_parent = '". $ post-> ID. "'AND post_type =' pièce jointe 'ORDER BY' post_date 'ASC LIMIT 0,1"; $ post_attachments = $ wpdb-> get_results ("$ queryattach"); if ($ post_attachments) $ image = $ post_attachments [0] -> guid; ?> Le code ci-dessus cherche dans la base de données pour récupérer l'URL de la première image associée à la publication actuelle, et la place à l'intérieur. $ image. Notez que l'image doit être attaché et non lié ailleurs.
Voir un autre article que j'ai écrit en utilisant ce code sur le blog de ThemeForest: "Redimensionnement d'image avec WordPress".
; ?>/inc/thumb.php? src =<?php echo $image; ?>& w = 50 & h = 50 )
Si une image associée est trouvée, elle est analysée dans le script TimThumb pour avoir une taille de 50x50px. Le titre et la date de l'article sont également affichés..
La boucle et la fonction sont alors fermées:
Ensuite, le widget est rendu compatible avec le modèle en l’enveloppant dans le $ before_widget et $ after_widget balises définies dans le modèle:
Finalement, le register_sidebar_widget () La fonction est utilisée pour enregistrer le widget dans le tableau de bord. "Blogs récents" sera le nom du widget utilisé dans le tableau de bord..
À l'intérieur functions.php ajoutez ce qui suit pour inclure le nouveau widget dans le modèle:
include (TEMPLATEPATH. "/inc/bloglist-widget.php");
Dans le tableau de bord, ouvrez Apparence -> Widgets et supprimez les "Articles de blog récents". (à ne pas confondre avec les 'Messages récents' par défaut de WordPress) widget dans la zone "Homepage Bottom":
Le style est assez simple. L'image est flottante sur le côté et la taille et le poids du texte sont modifiés. Ajouter ceci à style.css:
ul.bloglist margin: 0; ul.bloglist li clear: both; taille de police: 1em; hauteur de ligne: 1.3em; style de liste: aucun; marge inférieure: 17 px; débordement caché; ul.bloglist li img border: none; float: gauche; marge droite: 7px; ul.bloglist li .posttitle, ul.bloglist li .postdate display: block; taille de police: 0.9em; ul.bloglist li .posttitle font-weight: bold; marge supérieure: 2px; ul.bloglist li .postdate taille de la police: 0.8em; style de police: italique; poids de police: normal; ul.bloglist li a: lien, ul.bloglist li a: visité display: block; rembourrage: 2px; débordement caché; ul.bloglist li a: survol, ul.bloglist li a: actif, ul.bloglist li a: focus text-decoration: none;
Et ajouter de la couleur aux liens lorsque vous survolez deepblue.css:
ul.bloglist li a: lien, ul.bloglist li a: visité color: # 333; ul.bloglist li a: survol, ul.bloglist li a: actif, ul.bloglist li a: focus background-color: # e3e8ed;
C'est tout! Comme vous l'avez appris, créer un très Le widget de base est aussi simple que l’enveloppement d’une boucle personnalisée normale dans une fonction de widget. :)
Je voudrais commencer par m'excuser du fait que nous devons gâcher cette dernière partie de la série en abordant les problèmes d'Internet Explorer. mais c'est un navigateur qui est encore très utilisé et c'est notre devoir d'accueillir ceux qui l'utilisent mal.
Nous allons d'abord traiter avec IE7, puis avec les problèmes d'IE6 après.
À l'intérieur de / inc / dossier créer un nouveau dossier nommé / css / et à l'intérieur, deux fichiers: ie.css et ie6.css. Ces deux fichiers seront inclus dans l'en-tête dans une instruction conditionnelle d'IE. Ajoutez ce qui suit directement avant que les fichiers javascript jQuery ne soient inclus dans section de header.php:
Ces déclarations conditionnelles IE garantissent que le ie.css fichier est uniquement inclus dans les versions d’Internet Explorer inférieures à IE8; et ie6.css est également utilisé dans les versions inférieures à IE7.
Le premier problème se trouve dans la section des commentaires, où IE7 ne semble pas traiter les tailles de police de la même manière que les autres navigateurs, et rendre chaque commentaire fileté plus petit que son commentaire parent:
Ajouter ce qui suit dans ie.css pour définir la taille de la police dans les commentaires en pixels (par opposition à l'utilisation de em dans la feuille de style principale):
.commentlist cite, .commentlist span taille de la police: 14px; float: gauche; padding-right: 4px; .commentlist p font-size: 13px; hauteur de ligne: 16px; .commentmetadata font-size: 13px; hauteur de ligne: 14px; .commentlist .reply taille de la police: 13px;
Un autre problème: le formulaire de recherche et les en-têtes dans la barre latérale ont décidé qu'ils préféraient un retrait textuel de 15 pixels:
Laissez tomber ce qui suit pour le forcer à revenir:
#sidebar ul li * text-indent: -15px; #sidebar ul li ul * text-indent: 0;
Passons maintenant aux problèmes IE6. La première et la plus évidente est que l'arrière-plan de la barre de navigation ne fonctionne pas car il s'agit d'un fichier PNG transparent:
Plusieurs correctifs PNG IE6 sont disponibles, je vais utiliser DD_belatedPNG. Enregistrez le fichier .js dans le / inc / dossier.
Directement sous vos autres instructions conditionnelles IE dans header.php ajouter: (n'oubliez pas de modifier le nom du fichier .js si le vôtre n'est pas nommé DD_belatedPNG_0.0.7a-min.js)
À l'intérieur DD_belatedPNG.fix () nous passons deux arguments. Il s’agit simplement des sélecteurs CSS des éléments à appliquer au correctif PNG..
Ajouter à ie6.css pour résoudre quelques problèmes avec la zone de widgets de la page d'accueil et nous avons terminé:
.extras display: inline; ul.bloglist li a: survol, ul.bloglist li a: actif, ul.bloglist li a: focus background: none; curseur: pointeur; texte-décoration: souligné; ul.bloglist li width: 300px; ul.twitter li.twitter-item float: left; largeur: 260px;
Tous nos efforts pour séparer les styles de couleur du reste de notre CSS visaient à faciliter la création de jeux de couleurs de remplacement sélectionnables dans la page des options. Dans cette dernière section de la série, Innovation passe sous le couteau avec le redspace schème:
À l'intérieur de /modes/ dossier, créez un nouveau dossier nommé / redspace / et à l'intérieur, copier dans le search.png et bullet.gif fichiers de la /bleu profond/ dossier.
Faites également une copie de deepblue.css comme redspace.css.
Enregistrez les trois images suivantes dans le / redspace / dossier en tant que bg.jpg, trans.png et transred.png respectivement:
C’est maintenant aussi simple que de simplement échanger les codes de couleur bleus avec les codes rouges redspace.css:
/ * Innovation style rouge - redspace.css * / body background: url ("redspace / bg.jpg") repeat-x # 140a05 0 haut; couleur: # 333; a: lien, a: visité color: # 941919; #head h1 color: #fff; #head h3 color: # c4acaa; #nav background: url ("redspace / trans.png") répéter; bordure: solide 1px # 5b2022; #nav ul li a: lien, #nav ul li a: visité color: # b99e94; #nav ul li.current_page_item a: lien, #nav ul li.current_page_item a: visité background: url ("redspace / transred.png") repeat; couleur: # cdb9b2; #nav ul li a: survol, #nav ul li a: actif, #nav ul li a: focus color: # cdb9b2; #content background-color: # f9f9f3; bordure: solide 1px # 5b2022; bordure supérieure: aucune; .work a: lien img, .work a: visité img border: 5px solide # f2e9ea; .work a: survol img, .work a: actif img, .work a: focus img border: 5px solide # 8d4846; .work a: lien, .work a: visitée color: # 333; ul.twitter li.twitter-item background-color: # f6f5ed; bordure: 1px solide # eae9de; .flickr a: lien img, .flickr a: visité img border: 3px solid # f2e9ea; .flickr a: survolez img, .flickr a: actif img, .flick a: focus img border: 3px solide # 8d4846; .blogpost, .worksearch border-bottom: 1px solid # e8e3c8; h2 a: lien, h2 a: visité color: # 333; ul.meta li border-left: 1px solid # e3e8ed; #sidebar ul li # formulaire de recherche #s background: url ("redspace / search.png") no-repeat right # f6f6ec; bordure: 1px solide # E8E3C8; #sidebar ul li # formulaire de recherche #s: focus border: 1px solid # dad4b6; #sidebar ul li ul couleur d'arrière-plan: # f6f6ec; bordure: 1px solide # E8E3C8; #sidebar ul li ul li list-style: url ("redspace / bullet.gif"); #sidebar ul li a: lien, #sidebar ul li a: visité color: # 333; p.footer color: # 554740; p.footer a: lien, p.footer a: visité color: # 554740; border-bottom: 1px en pointillé; p.footer a: hover border-bottom: 1px solid; texte-décoration: aucun; / * Liste des commentaires * / .commentlist li .avatar border: 2px solid # f2e9ea; .commentlist cite a: link, .commentlist cite a: visited color: # 333; .commentlist .commentmetadata a: lien: premier-enfant, .commentlist .commentmetadata a: visité: premier-enfant color: # 333; .thread-alt background-color: # F6F6EC; .thread-even background-color: # F9F9F3; .depth-1 border: 1px solid # E8E3C8; .even, .alt border-left: 1px solid # E8E3C8; input, textarea background-color: # F6F6EC; bordure: 1px solide # E8E3C8; entrée: focus, zone de texte: focus border: 1px solid # dad4b6; p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed; ul.bloglist li a: lien, ul.bloglist li a: visité color: # 333; ul.bloglist li a: survol, ul.bloglist li a: actif, ul.bloglist li a: focus background-color: # f2e9ea; Dans le tableau de bord, ouvrez la page Options d’innovation et sélectionnez redspace.css à partir de l’option 'Schéma de couleurs' - la page a déjà numérisé le /modes/ dossier et répertorié les fichiers .css là-bas.
Hit appliquer, et nous avons terminé!
Tout au long de cette série, vous avez acquis un certain nombre de compétences nécessaires pour faire fonctionner tous les types de sites avec le système WordPress! La plupart des fichiers d'Innovation peuvent être réutilisés dans vos nouveaux projets pour accélérer votre processus de développement..
Téléchargez les fichiers source à partir de cette partie et un autre jeu de couleurs supplémentaire (plus fondamental) est disponible - SoftLight:
Besoin d'aide avec l'innovation? Voulez-vous partager vos nouveaux jeux de couleurs? Allez sur danharper.me/innovation/ et cliquez sur le lien Forums..
Merci d'avoir lu et j'espère vraiment que vous avez trouvé cette série utile!
- Dan
Aimer WordPress? Besoin de plus? J'ai compilé un rapide résumé de certaines de mes ressources WordPress préférées.
Au cours du livre, vous construirez TROIS thèmes WordPress, un blog, un site de portfolio et un site général avec menus et sous-menus. Chaque thème présente différents aspects du thème WordPress..
Lire la suite
Vous avez demandé, et nous avons répondu! En raison de la forte demande, nous lançons une nouvelle série de vidéos qui se déroulera parallèlement aux screencasts "Diving into PHP". Nous espérons que ces deux séries, vues de dos, feront de vous un concepteur dynamique de PHP / WordPress..
Série de visites
Développement du thème, le codex est une documentation claire et bien écrite. Venant des créateurs de WordPress, vous ne pouvez pas vous tromper en suivant ses instructions..
Visitez le Codex
Une série de screencast vidéo sur Designing for WordPress. Il s’agit d’une série en trois parties qui couvre le téléchargement et l’installation de WordPress sur un serveur jusqu’à un thème complet..
Série de visites
Votre ressource visuelle pour toutes choses WordPress.
Visitez le site
Je vais vous montrer comment créer un thème wordpress à partir de rien dans ces 3 parties de la série de tutoriels. Je couvrirai de la structuration, la conception dans Photoshop, le découpage en tranches, le codage en html entièrement basé sur css, et enfin la mise en œuvre de wordpress.
Série de visites
C'est évident, mais si vous avez besoin de lire WordPress en plus, parcourez les tutoriels précédents.!
Visitez le site
L'avantage de WordPress est qu'il ne limite pas la façon dont le contenu est affiché, mais fournit un «cadre» de façons de le faire. Mieux encore, il est possible de modifier l'affichage en fonction du contenu.
Tutoriel de visite
La flexibilité offerte par le moteur WordPress est phénoménale - pouvoir publier n'importe quoi, d'un blog de base à un forum, d'une vitrine Web à un site de CMS d'entreprise! Nous examinons ici quelques-unes des grandes façons dont WordPress a été utilisé jusqu'à présent.
Visitez l'article
Nous examinons comment un thème WordPress premium très prisé tire parti des fonctions avancées de WordPress pour créer un modèle qui optimise réellement ce dont WordPress est capable.!
Visitez l'article
WordPress est bien connu pour son incroyable collection de plugins gratuits. Il y en a un pour presque tous les besoins auxquels vous pouvez penser, de la sauvegarde de votre installation WordPress à la demande d'une tasse de café ou à la lutte contre le spam..
Visitez l'article
Ce tutoriel décrira l'implémentation d'un plugin Wordpress à partir de zéro. Le plugin se connecte à une base de données externe OSCommerce et affiche des produits aléatoires sur votre site Wordpress. Il implémente également une page de configuration pour le panneau d'administration Wordpress.
Tutoriel de visite
"WordPress Hacks" couvre le monde qui entoure WordPress, y compris les derniers piratages WordPress, des actualités, des conseils, des astuces et des conseils pratiques concernant le célèbre logiciel de blogging open source.
Visitez le site
Un nouveau blog pour poster des réponses aux questions WordPress, et des recettes rapides mais très utiles sur ma plateforme de blogs préférée.
Visitez le site
La première étape du succès consiste à réaliser que quel que soit le problème que vous rencontrez, il est inévitable que quelqu'un d'autre l'ait déjà rencontré auparavant. Une simple recherche sur Google vous fournira une solution à la plupart des difficultés que vous rencontrez lors du développement pour WordPress..
Visitez le site
