Share
Nous avons conçu notre site et l'avons converti en un fichier HTML statique dans les deux tutoriels précédents. Dans la dernière partie de cette série, nous allons configurer WordPress en tant que CMS et convertir notre fichier HTML en un modèle compatible avec WordPress..
Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.
Rendez-vous sur WordPress.org et téléchargez la dernière version de WordPress.
Décompressez l'archive et déplacez tous les fichiers du dossier WordPress sur votre serveur local ou Web.
Créez une base de données MySQL vierge et conservez toutes vos informations de connexion. Vous en aurez besoin en environ 3 secondes..
Ouvrez votre navigateur et allez dans le dossier qui contient tous vos fichiers WordPress. Vous serez invité à créer un fichier de configuration. Cliquez sur Créer un fichier de configuration
Maintenant, nous devons entrer dans notre base de données MySQL et lancer l’installation..
Si tout s'est bien passé lors de l'installation, votre nouveau login vous sera présenté. Copiez votre nouveau mot de passe et connectez-vous au backend de WordPress. Une fois que vous vous êtes connecté au serveur, il vous sera proposé de changer votre mot de passe. Faire ceci maintenant!
Maintenant que nous sommes configurés avec notre nouvel utilisateur, nous pouvons commencer à configurer WordPress pour qu’il soit utilisé en tant que CMS. Premièrement, nous allons permettre aux permaliens de rendre nos chemins beaux. Survoler Réglages et cliquez sur la flèche à droite pour faire défiler d'autres options et cliquez sur Liens permanents.
Nous allons utiliser les options Jour et Nom, alors sélectionnez cette option et appuyez sur Sauvegarder les modifications.
WordPress nous fournit un post factice ainsi qu'une page factice. Nous allons donc les supprimer et ajouter toutes les pages dont nous avons besoin..
Survolez Des postes et cliquez sur la flèche pour faire défiler les options. Cliquer sur modifier. Si vous survolez Hello World! d'autres options de publication apparaîtront, cliquez simplement sur Effacer puis confirmez l'action.
Note: Cette étape n'est pas nécessaire, j'aime juste garder tout bien rangé.
Étendre le Des pages options et cliquez sur Modifier puis supprimez le Sur page.
dans le Des pages barre latérale gauche, cliquez sur Ajouter un nouveau afin que nous puissions ajouter nos pages.
Remplissez le titre et le contenu que vous voulez sur votre page, puis une fois que vous avez terminé, cliquez sur Publier sur le côté droit de la page.
Si vous ne voulez pas que la page soit visible, vous pouvez cliquer sur Enregistrer le brouillon pour travailler plus tard.
Nous voulons créer des pages enfants de Pricing & Signup. Par conséquent, lorsque vous créez ces pages, vous devez modifier une option dans la page de l'éditeur de pages..
Dans la capture d'écran ci-dessus, j'ai souligné l'option à modifier. Nous voulons que Cheap Plan soit une page enfant de Prices & Signup. Nous allons donc dire à WordPress que Prices & Signup est le parent de Cheap Plan. Cela nous permettra de créer une navigation spécifique pour notre thème..
Une fois que toutes vos pages sont créées, votre section Éditer de pages doit ressembler à la capture d'écran ci-dessous..
Tout ce que nous devons configurer pour le moment a été configuré, nous pouvons donc maintenant convertir notre fichier HTML en un modèle WordPress..
Ouvrez votre éditeur et accédez à votre dossier racine WordPress.
Nous voulons naviguer vers wp-content> themes.
Nous allons supprimer le thème classique. Encore une fois, ceci est juste pour garder tous nos dossiers bien rangés. Donc, supprimez classic et duplicate default. Renommez par défaut wordpress_cms.
Allez dans le dossier wordpress_cms et supprimez rtl.css et le dossier images.
Ensuite, ouvrez style.css et supprimez tout sauf la section de commentaire principale en haut du fichier.
Nous avons créé notre propre style.css fichier qui vit dans un dossier. Ce style.css fichier indique à WordPress des informations sur notre modèle, alors que nous avons notre propre style.css fichier, nous avons encore besoin de garder celui-ci.
Modifier le style.css Fichier de ressembler au code ci-dessous. Changer mes informations pour les adapter à vos informations!
/ * Nom du thème: URI du thème pour le CMS WordPress: http://votre-site.com Description: Utilisation de WordPress en tant que CMS. NetTuts + Tutoriel! Version: 1 Auteur: Matt Vickers URI de l'auteur: http://envexlabs.com/ * /
Enregistrez ce fichier et revenez sur votre navigateur. Étendre le Apparence sidebar et cliquez sur Des thèmes. Vous devriez voir notre thème WordPress CMS en option. Cliquez sur Activer pour que WordPress utilise notre nouveau thème.
WordPress est maintenant prêt à accepter notre site pré-codé!
Si vous naviguez jusqu'à la racine WordPress dans votre navigateur, vous devriez voir la page principale de WordPress sans style appliqué..
Copiez les dossiers inc et img et tout son contenu dans WordPress_cms.
Nous devons dire à WordPress que nous voulons utiliser nos feuilles de style plutôt que les anciennes, alors ouvre-toi header.php
Nous allons supprimer du code inutile. J'ai commenté les zones que vous devez supprimer, merci de vous référer au code ci-dessous.
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> >/ ">
Vous pouvez également supprimer de la balise body. Nous devrions avoir un fichier d’en-tête assez simple maintenant, ajoutons donc nos 2 fichiers CSS dans notre thème.
Juste en dessous de la balise de titre, nous allons utiliser la balise de lien normale.
Vous remarquerez que nous utilisons une fonction appelée bloginfo (). Cette fonction est utilisée pour récupérer des informations sur votre blog actuel. Nous pouvons déplacer des serveurs ou changer de structure de dossiers à l'avenir, nous ne souhaitons donc pas définir de chemins d'accès difficiles vers nos feuilles de style. Nous transmettons donc la valeur template_url qui renvoie le chemin d'accès à notre modèle actuel. C’est très puissant si vous envisagez de créer un modèle que d’autres personnes utiliseront, car vous ne savez pas comment leur WordPress est configuré..
Si vous chargez le site, vous devriez voir que certains de nos styles par défaut de notre feuille de style sont appliqués au site..
Ensuite, ouvrez footer.php et effacez tout entre les commentaires et wp_footer ().
Aussi, ouvrez sidebar.php et supprimez tout après les commentaires. Nous sommes maintenant prêts à copier nos conteneurs HTML dans nos fichiers WordPress.
Ouvrez le index.html fichier de notre précédent tutoriel et tout copier entre le
Mots clés. Collez ce code dans header.php.Pour simplifier les choses, supprimons toutes les balises et le contenu de chacun des conteneurs afin de ne conserver que les divs de conteneur..
C'est là que ça peut devenir un peu délicat. Nous devons couvrir ce code entre 4 fichiers. J'ai commenté où chaque morceau doit aller, alors allez-y, copiez et collez chaque section dans le fichier auquel il appartient.
Très bien, juste pour nous assurer que tout fonctionne comme il se doit, vérifions que chaque fichier est rempli avec le contenu approprié. Vos fichiers doivent ressembler aux exemples ci-dessous.
header.php
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> sidebar.php
footer.php
Si vos pages semblent bonnes, passons à autre chose. Si ce n'est pas le cas, faites-les ressembler aux exemples ci-dessus.
Si vous revenez à votre navigateur et ajoutez à peu près à la fin de l'adresse et appuyez sur Entrée. Cela devrait vous emmener à votre page à propos.
Nous allons commencer par créer notre en-tête et nos éléments de navigation, donc si vous ne l'avez pas déjà ouvert, ouvrez header.php
Dans header_container, nous devons ajouter notre balise logo h1 #.
Nous utilisons le bloginfo () fonctionner à nouveau, mais cette fois nous prenons le nom de notre blog.
Si vous actualisez, vous devriez voir notre superbe logo! Maintenant, nous devons ajouter notre navigation.
Au lieu de coder en dur dans nos éléments de navigation, nous allons utiliser une fonction intégrée de WordPress appelée wp_list_pages (). Cela nous permettra de contrôler les éléments de page à afficher et de créer des liens vers chacune de ces pages..
Nous passons quelques options à la fonction afin que nous puissions avoir WordPress lister les pages exactement comme nous le voulons.
La première option que nous envoyons est title_li. Par défaut, WordPress génère un titre li qui affiche des pages. Nous ne voulons pas cela, alors nous envoyons simplement une valeur vide.
La deuxième option est la profondeur. Encore une fois, par défaut, WordPress affichera une liste de toutes les pages en cours d’inclusion, y compris les pages enfants. Nous ne voulons pas que cela se produise, nous passons donc une variable de 1 pour que WordPress affiche uniquement les pages de niveau supérieur..
La valeur finale est inclure. Nous ne voulons pas afficher toutes les pages que nous avons créées, nous voulons uniquement afficher À propos, Tarifs et inscription et Contact. Nous passons les identifiants de chaque page que nous voulons afficher. Les identifiants de l'exemple ne correspondront pas à ceux de votre page, alors ASSUREZ-VOUS DE LES CHANGER.
Pour obtenir l'ID des pages, accédez à la section d'édition de la page. Lorsque vous passez la souris sur le lien de page, vous pouvez trouver l'ID dans le lien. c'est-à-dire: wp-admin / page.php? action = edit & post = 15
Toutes les options disponibles sont disponibles sur http://codex.WordPress.org/Template_Tags/wp_list_pages
Si vous actualisez la page, nous devrions avoir une bonne navigation.
Nous avons de la chance, nous pouvons utiliser cette fonction exacte pour prendre soin de notre barre latérale ainsi que de la navigation de notre pied de page. Nous n'avons qu'à apporter quelques modifications aux options que nous vous envoyons pour répondre à chaque besoin..
S'ouvrir sidebar.php et écrire un peu de code dans notre sidebar_container.
post_parent) wp_list_pages ('title_li = & child_of ='. $ post-> post_parent); ?>
Nous voulons uniquement afficher notre barre de navigation latérale si la page en cours est une page enfant. Pour ce faire, nous vérifions si la valeur de la page en cours est affectée à post_parent. Si la page n'est pas un enfant, cette valeur sera 0.
Les informations sur les articles et les pages se trouvent dans la $ post variable. Si vous imprimez_r ($ post), vous pourrez voir toutes les informations sur le post qui vous est disponible..
Maintenant que nous recherchons un post-parent, nous devons répertorier tous les enfants de notre parent. Pour ce faire, nous passons une variable de child_of et passons l'ID de post_parent actuel.
Si notre ID parent est 5, nous disons wp_list_pages () pour lister toutes les pages ayant un identifiant post_parent de 5. C'est très utile pour gérer la navigation à plusieurs niveaux..
Ensuite, nous allons rapidement mettre en place notre pied de page, puis nous afficherons du contenu sur nos pages. Cela rassemblera tout le site et nous pourrons commencer à mettre la dernière main à notre nouveau site géré par WordPress..
S'ouvrir footer.php et pour la dernière fois, ajoutez le wp_list_pages () une fonction.
Copyright Gear'd © 2009
Cette fonction est identique à notre navigation dans l'en-tête, mais au lieu d'utiliser include, nous utilisons exclude pour supprimer tous les éléments de navigation principaux actuels de notre navigation de bas de page..
Les identifiants de l'exemple ne correspondront pas à ceux de votre page, alors ASSUREZ-VOUS DE LES CHANGER.
Un dernier fichier modèle à modifier avant que nous ayons terminé. S'ouvrir post.php et effacez tout entre get_header () et get_sidebar ().
C'est là que nous allons ajouter notre content_container
Lorsqu'il s'agit d'afficher votre contenu de publication et de page, WordPress utilise un ensemble de fonctions spéciales appelé The Loop. En un mot, il prend votre contenu et le formate pour le montrer à l'utilisateur final..
Dans notre conteneur de contenu, nous allons ajouter une instruction if et une boucle while.
Premièrement, nous vérifions si nous avons des publications. Si nous les parcourons, nous les parcourons et nous configurons diverses fonctions que nous pouvons utiliser pour afficher le contenu..
Dans notre boucle while, nous allons ajouter tout notre contenu restant..
post_parent):?>post_parent); ?>
Nous utilisons quelques nouvelles fonctions pour afficher le contenu de notre page. La bonne chose à propos de WordPress est que de nombreuses fonctions utilisent un anglais simple pour les conventions de nommage.
Nous avions besoin du titre de la page afin que nous utilisions le titre() pour l'afficher. Nous pouvons également saisir le titre de tout article ou page en utilisant get_the_title ($ post_id) et en passant l'ID de poste car il est seulement variable.
Nous voulons seulement montrer le deuxième titre si nous sommes sur une page enfant, nous utilisons donc le if ($ post-> post_parent) à nouveau pour vérifier si nous sommes sur une page enfant, et si nous sommes nous obtenons le titre de ce post parent en utilisant get_the_title ().
Last but not least, nous utilisons le contenu() pour afficher le contenu de la page.
Attendez, notre barre latérale semble être au mauvais endroit sur la page, alors prenez get_sidebar () et déplacez-le en dessous get_header (). Maintenant notre sidebar vient avant notre contenu.
Attacher les bouts lâches
Si vous chargez la racine de votre installation WordPress dans votre navigateur, vous devriez recevoir une erreur Not Found.
En effet, par défaut, la page principale de WordPress contient une liste de tous vos messages. Nous n'utilisons pas WordPress pour les blogs, nous devons donc dire à WordPress d'utiliser plutôt l'une de nos pages..
Retournez à votre backend WordPress et chargez le En train de lire page dans Réglages. La première option est l’affichage Front Page et l’option sélectionnée devrait être Vos derniers messages. Nous souhaitons sélectionner une page statique et utiliser le menu déroulant pour modifier notre page de couverture en n'importe quel message de votre choix. Pour cet exemple, je vais pointer vers notre page À propos de.
Enregistrez les modifications et rechargez la page racine de votre installation WordPress. Il devrait vous rediriger vers la page à propos.
La prochaine chose que vous remarquerez est que notre navigation ne montre plus un état actif même si nous sommes sur la bonne page. En effet, pour notre page statique, nous utilisions une classe d’actifs. wp_list_pages () assigne une valeur différente pour les états actifs, nous avons donc besoin d'ajouter quelques classes à nos feuilles de style. Les 2 classes que nous allons ajouter sont .current_page_item et .current_page_parent.
ul.nav li.active a, ul.nav li.current_page_item a, ul.nav li.current_page_parent a #sidebar_container ul li.active a, #sidebar_container ul li.current_page_item aAllez-y et utilisez le code ci-dessus pour ajouter les classes à notre navigation supérieure et latérale. Actualisez la page et vous devriez avoir un état actif pour la page sur laquelle vous êtes actuellement..
Deux autres changements et nous pouvons conclure cela.
Notre page Tarification et inscription n’est en réalité qu’un titre pour ses pages enfants, mais WordPress la considère comme sa propre page. Nous souhaitons rediriger l'utilisateur vers la page Plan gratuit lorsqu'il clique sur Tarification et inscription..
L'un des nombreux avantages de WordPress est sa capacité de plug-in. Il existe 1 000 plugins écrits pour WordPress qui ajoutent des fonctionnalités infinies qui ne sont pas disponibles immédiatement. Nous allons installer un plugin de redirection que nous pourrons utiliser pour rediriger l'utilisateur.
Le plugin que nous allons utiliser peut être téléchargé ici: http://WordPress.org/extend/plugins/redirect/. Téléchargez le plugin et déplacez le dossier de redirection vers wp-content / plugins.
Nous devons maintenant activer le plugin dans le backend WordPress pour pouvoir l'utiliser. Dans votre backend, cliquez sur Plugins et vous devriez être redirigé vers une page avec tous les plugins disponibles.
Trouvez notre plugin de redirection et cliquez sur Activer. Notre plugin est maintenant activé.
Chaque plugin fonctionne différemment, assurez-vous donc de lire les instructions avant de commencer à les utiliser. Notre plugin de redirection utilise des champs personnalisés pour indiquer à WordPress quelle publication nous voulons rediriger et où. Aller à Des pages et cliquez sur modifier sous notre page Tarifs et inscription.
Juste en dessous de l'éditeur de texte se trouve la section Champs personnalisés. La première entrée nous allons donner une valeur de redirection afin que WordPress sache que nous voulons rediriger et la deuxième entrée sera l'adresse de notre page Free Plan. Une fois que vous avez terminé frappé Ajouter un champ personnalisé et assurez-vous de Mettre à jour la page en haut à droite.
Si vous revenez à votre navigateur et cliquez sur Tarification et inscription, vous serez redirigé vers la page Plan gratuit..
Trier tout le monde
Notre navigation de tarification et d'inscription semble un peu en panne. Notre forfait gratuit est situé en dernier alors qu'il devrait être au top. Nous pouvons définir la poste directement dans le dossier sauvegardé; chargez votre section Pages principale, passez la souris sur Plan gratuit et cliquez sur Édition rapide..
Le champ que nous souhaitons mettre à jour est Order. Changez la valeur de 0 à 1 et cliquez sur Update Page. Faites de même pour les plans bon marché (ordre 2) et coûteux (ordre 3), en mettant à jour l'ordre en conséquence..
Actualisez notre navigateur pour voir les nouvelles mises à jour.
Ceci s'applique également à notre navigation en-tête et en pied de page. Si vous n'aimez pas l'ordre dans lequel ils sont, n'hésitez pas à les modifier..
J'aime les choses personnalisées
Les champs personnalisés sont géniaux. Ils nous ont laissé passer des informations spécifiques pour chaque poste. Nous pouvons ajouter des images à notre publication à l'aide de Media Uploader, mais pour cet exemple, nous allons utiliser des champs personnalisés pour transmettre des informations à notre fichier page.php..
Ouvrez votre page À propos dans l'éditeur de page WordPress.
Nous allons utiliser Media Uploader pour télécharger une image à utiliser pour notre en-tête, juste à côté de Télécharger / Insérer cliquez sur l'icône de l'image.
Je vais télécharger le banner.gif que nous utilisions auparavant, alors cliquez sur Sélectionnez les fichiers et le trouver sur votre ordinateur.
Une fois votre fichier téléchargé, vous devriez recevoir des informations sur votre image. Au bas de cette fenêtre modale, vous devriez voir une entrée nommée URL du lien et le chemin d'accès à votre image. Nous voulons copier cette URL. Si cette entrée est vide, vous pouvez cliquer sur le bouton URL du fichier juste en dessous et l’entrée sera mise à jour..
Une fois que vous avez copié ce chemin, vous pouvez fermer cette fenêtre et passer à la section Champs personnalisés. La première entrée que nous allons utiliser est header_image et la deuxième valeur est le chemin d'accès à notre fichier..
Ajoutez votre champ personnalisé en appuyant sur Ajouter un champ personnalisé et Mettre à jour la page dans le coin en haut à droite.
S'ouvrir page.php et trouver le header_image div.
Nous voulons vérifier s'il y a une image à afficher et s'il y en a une, nous allons saisir le chemin et afficher l'image.
ID, 'header_image', true); si ($ image):?>
Nous utilisons d'abord get_post_meta () assigner le chemin de notre image à la variable $ image.
Le premier argument que nous envoyons à get_post_meta () est l'ID de la page sur laquelle nous sommes. La deuxième valeur est le nom du champ personnalisé qui, dans notre cas, est header_image. Le dernier argument indique à WordPress que nous voulons uniquement renvoyer un champ personnalisé..
Ensuite, nous vérifions si $ image est vide. S'il n'y a pas de champ personnalisé nommé header_image, nous n'affichons pas l'image, sinon, nous affichons l'en-tête div ainsi que l'image à l'intérieur..
Nous faisons écho à la valeur de $ image en tant que source d'image pour afficher notre image.
Actualisez votre navigateur et affichez le Contact page. Vous ne devriez voir aucune image. Si vous chargez la page À propos de, vous devriez voir notre image ainsi que la boîte arrondie bleue qui la contient..
C'est ça. Nous l'avons fait! Prenez un moment pour vous féliciter d'avoir réussi à suivre l'ensemble du tutoriel et de gérer mon style d'enseignement, espérons-le, décent.
Nous avons à peine jeté la surface de WordPress, mais je vous ai donné une base solide pour commencer à aller plus loin dans WordPress..
Si vous souhaitez continuer à apprendre le type de fonctions offertes par WordPress, je vous suggère de jeter un coup d'œil au Codex WordPress..
Lorsque vous rencontrez des problèmes ou que vous essayez d'accomplir quelque chose que WordPress n'offre pas, donnez à Internet une recherche rapide. Il est probable que quelqu'un rencontre le même problème et 99% du temps, il existe un plugin pour le résoudre.!
Encore une fois, merci d'avoir lu le tutoriel! J'espère que vous avez beaucoup appris et que vous pouvez maintenant commencer à offrir à vos clients un système de gestion de contenu solide pour vous simplifier la vie..
Accentsconagua
