Need help? Chat now!

Hostwinds Blog

Résultats de recherche pour:


Guide pratique de Hostwinds: comment créer un thème enfant WordPress L'image sélectionnée

Guide pratique de Hostwinds: comment créer un thème enfant WordPress

par: Hostwinds Team  /  juillet 12, 2019


Maya Angelou a déjà dit: "Il est temps que les parents enseignent aux jeunes que dans la diversité, il y a de la beauté et qu'il y a de la force."Maintenant, vous vous posez peut-être vous-même: «Comment se rapporte-t-il à un article de blog WordPress?»

Grande question.La réponse est un peu d'étirement, mais ici, les thèmes de parent WordPress encouragent les thèmes de WordPress Enfant à être aussi divers que l'esprit peut imaginer.En fait, chaque thème enfant a besoin d'un thème parent, et ce dernier permet au premier de fournir à votre site plus de diversité, de beauté et de force.Ainsi, les thèmes parents suivent les conseils de la grande maya Angelou.Qu'est-ce que c'est?C'était plus que «un peu» d'un étirement, et il serait préférable de commencer ce blog après, prétendre que ces paragraphes n'existaient jamais?Ça a l'air d'être une bonne idée.Dans ce cas…

Bonjour les gens!Bienvenue à la série WordPress Child Theme Blog!Dans la partie 1, nous sommes passés sur des faits et des détails WordPress, définis sur des thèmes d'enfants de WordPress, et une hébergement de WordPress Hostwinds sans problème.Qu'est-ce que c'est?Vous souhaitez des quantités copieuses d'informations sur cette soi-disant "Hostwinds WordPress Hosting" parce que cela ressemble à un service merveilleux et bénéfique?

Ma réponse est double:

1. Vous avez absolument raison - Hébergement WordPress Hostwinds est un service merveilleux et bénéfique!

2. Je serai heureux de vous fournir cela.

L'hébergement WordPress est l'hébergement Web parfaitement compatible avec les sites Web construits à l'aide de WordPress.Cela facilite la construction et la maintenance de votre site WordPress pour diverses raisons, que nous avons discutés dans la partie 1 de cette série de blogs.Qu'est-ce que c'est?Vous souhaitez savoir où aller pour commander Hostwinds WordPress hébergement à droite cette seconde?

Tout pour vous, public attentionné! Ce lien vous mènera au bon endroit:

https://www.hostwinds.com/hosting/wordpress

Qu'est-ce que c'est?Vous souhaitez également savoir où aller pour trouver la partie 1 de cette série de blogs de thème WordPress Enfant?

Ma réponse est double:

1. Vous êtes assez bavard aujourd'hui, public, et j'aime ça!

2. Cliquez sur le lien ci-dessous pour découvrir la partie 1.

Thèmes enfants WordPress et pourquoi les utiliser

La saga épique progresse dans la partie 2, où nous apprendrons comment utiliser un thème enfant.Voulez-vous apporter des modifications à votre thème WordPress?Vous voulez vous assurer que ces modifications ne sont pas effacées lorsque vous installez inévitablement une mise à jour des fins de sécurité et de fonctionnalité?Les thèmes d'enfants sont là pour vous sauver!Nous créerons et activons l'un de ces thèmes d'enfants magiques dans cette pièce de blog.

Juste pour vous informer de ce que nous ferons dans notre exemple hypothétique, les modifications suivantes seront apportées à notre style CSS de WordPress Site:

1. Un effet de secousse lorsque les visiteurs survolent certaines rubriques de nos pages Web.

2. Inversion des couleurs d'une image lorsque les visiteurs volent dessus.

Boom, simple comme ça.Commençons à créer une équipe.

Étapes préalables à la création d'un thème enfant

Avant de nous avancer et de plonger dans le monde des thèmes d'enfants, installons WordPress.

Voici comment installer WordPress à l'aide de Softaculous App Installer (Softaculous est fourni gratuitement avec les plans d'hébergement Web Hostwinds Shared et Business, et cela fait de l'installation de WordPress un jeu d'enfant):

Étape # 1: Connectez-vous à votre espace client: https://clients.hostwinds.com/clientarea.php

Étape # 2: Cliquez sur votre service Hostwinds

Étape 3.Cliquez sur "Connectez-vous à CPanel" dans le menu "Actions" à gauche

Étape 4.Connectez-vous à CPanel >> Cliquez sur le "Installateur d'applications satinaculeux" dans le menu "Logiciel"

Étape n ° 5.Une fois sous sadculet, cliquez sur "Blogs" dans le menu situé sur le côté gauche de la page >> Cliquez sur "WordPress"

Tout d'abord, cliquez sur Blogs

Deuxièmement, cliquez sur WordPress

Étape 6.Cliquez sur "Installer"

Étape # 7. Remplissez des informations telles que votre nom de domaine, votre nom d'utilisateur d'administrateur et votre mot de passe d'administrateur

Tu l'as fait! Terminé!

Une fois que vous avez tout configuré WordPress

Il est maintenant temps d'activer votre thème parent, et voici comment procéder:

Étape 1.Connectez-vous à WordPress en utilisant les informations d'identification que vous venez de créer sadaculeuse lors de l'installation de WordPress >> Cliquez sur "Apparence" dans le menu à gauche de la page >> Cliquez sur "Thèmes"

Étape 2.Sélectionnez votre thème préféré et cliquez sur "Activer"

Tout d'abord, cliquez sur Apparences

Deuxièmement, cliquez sur Thèmes

Cliquez sur le bouton Activer

Thème parent effectivement activé! Au suivant!

Et maintenant, étapes pour créer un thème enfant

Ouais, nous sommes enfin prêts à créer notre thème enfant. Voici comment faire:

Étape 1.Croisière sur votre compte CPanel >> Cliquez sur "Gestionnaire de fichiers" dans le menu "Fichiers" >> Entrez dans votre "Public_html" Dossier >> Accédez à votre dossier "WP" >> Accédez à votre dossier "WP-Content">> Allez dans votre dossier "Thèmes"

Tout d'abord, cliquez sur public_html

Deuxièmement, cliquez sur wp / troisième, cliquez sur wp-content

Étape 2. Faire un nouveau dossier Dans votre dossier WP-Contenu / Themes intitulé "[Votre nom de thème parent va ici] -Child."Vous pouvez également nommer cela quelque chose comme "[Votre nom de thème parent va ici] _child."Pour y parvenir, cliquez sur "+ dossier" dans le coin supérieur gauche de la page.

Étape 3. Allez dans votre nouveau dossier et créez un nouveau fichier.Cliquez sur votre nouveau dossier >> Cliquez sur "+ Fichier" dans le coin supérieur gauche de la page >> Nom du nouveau fichier "style.css".

Nous créons un fichier style.css en premier parce que c'est la chose la plus basique que l'on puisse faire pour faire un thème d'enfant.Attendez, cela semble familier.Oh oui, il est très rappelant une citation de la partie 1 de cette série de blogs de thème WordPress Child Theme: "Les thèmes d'enfants les plus simples incluent un fichier de style.CSS."

Passons à l'étape 4!

Étape 4.Ouvrez votre fichier style.css en cliquant avec le bouton droit de la souris sur la touche et sélectionnez "Modifier" >> Copier et coller le code suivant dans votre document Style.css, puis cliquez sur "Enregistrer les modifications"

12345678910 / * Nom du thème: URI du thème: Description: Auteur: URI de l'auteur: Modèle: Version: Licence: * /

Maintenant, avant de remplir le reste de ce code, permettez-moi d'expliquer ce que signifie exactement chacun de ces champs.

Nom du thème est le nom du thème parent que vous venez d'activer.

URI du thème Serait généralement où vous mettriez l'URL de la page d'accueil de votre thème, car c'est l'URL d'une page Web où les données concernant votre thème peuvent être trouvées.

La description est une courte phrase résumant le thème de votre enfant.

Auteure c'est vous, donc votre nom ou nom d'utilisateur WordPress va ici.

URI de l'auteur est l'URL de votre page d'accueil.

Modèle est le nom du dossier du thème parent.

Version est le numéro de version de votre thème enfant. Nous utiliserons 1.0.0.

Licence est votre déclaration de licence pour votre thème enfant.

Vous pouvez également ajouter des champs tels que "Text Domain" et "Tags", ce qui n'est pas requis.

Voici le code que j'ai rempli pour obtenir les résultats souhaités:

12345678910 / * Nom du thème: Twentyseventeen-childTheme URI: http://mydomain.com/wp/twentyseventeen-child/Description: Thème enfant pour Twenty Seventeen ThemeAuteur: ErinCA URI de l'auteur: http: //mondomaine.comTemplate: TwentyseventeenVersion: 1.0.0License : GNU General Public License v2 ou version ultérieure * /

Si vous avez besoin de plus de précisions sur les éléments à insérer pour vos informations spécifiques de thème / thème enfant, passez en revue les éléments suivants:

12345678910 / * Nom du thème: [LE NOM DU THÈME DE VOTRE PARENT VA ICI] -childTheme URI: http: // [LE NOM DE VOTRE PAGE D'ACCUEIL VA ICI] .com / [LE NOM DU THÈME DE VOTRE PARENT VA ICI] -childDescription: Thème de l'enfant pour [LE THÈME DE VOTRE PARENT LE NOM VA ICI] themeAuthor: [VOTRE NOM VA ICI] URI de l'auteur: http: // [LE NOM DE VOTRE PAGE D'ACCUEIL VA ICI] .comTemplate: [LE NOM DU THÈME DE VOTRE PARENT VA ICI] Version: 1.0.0Licence: GNU General Public License v2 ou version ultérieure * /

Une fois que vous tapez ce morceau de code, vous pouvez remplir le reste du document car vous rempliriez généralement un document CSS.Au fait, si vous n'avez pas eu d'expérience avec CSS ou si vous avez besoin de brosser vos connaissances CSS, nous avons publié un blog post expliquant les bases de CSS.

Le lien suivant vous dirigera vers notre blog "HostWinds CSS Chat" Pièce:

Chat CSS Hostwinds

Il est temps d'activer notre thème enfant! Suivez ces étapes pour ce faire:

  1. Accédez à votre tableau de bord WordPress, puis cliquez sur «Apparences» dans le menu tout au long de la page de la page.
  2. Cliquez sur "Thèmes" >> Cliquez sur "Activer" sous le nom de thème de votre enfant

Maintenant, vous remarquerez que votre site WordPress est un peu différent, mais Ne paniquez pas. Une fois que vous aurez terminé les quelques étapes suivantes, vous reviendrez à la normale.

Étape 1.Retournez dans votre dossier à thème de votre enfant dans le gestionnaire de fichiers de CPanel (le même dossier contenant votre fichier Style.css)

Étape # 2. Créez un nouveau fichier et nommez-le "Fonctions.php"

Étape # 3. Cliquez avec le bouton droit de la souris sur le fichier >> Cliquez sur "Modifier"

Étape # 4. Copiez et collez ce code exact dans le document, puis cliquez sur le bouton bleu "Enregistrer les modifications" dans le coin supérieur droit de la page:

Php 1234567

Si vous actualisez la page sur votre site Web WordPress, elle devrait par magie revenir à la normale et être beaucoup plus jolie.

Permettez-moi de vous expliquer pourquoi les étapes précédentes sont nécessaires. Le code que vous venez de copier et de coller permet à tous les thèmes parents WordPress de lire le CSS standard fourni avec WordPress.

Et maintenant, étapes pour ajouter votre code CSS

Afin de modifier efficacement votre code CSS, vous devez identifier les noms de classe appropriés dans votre thème de parent WordPress.Voici comment vous faites cela: cliquez avec le bouton droit de la souris sur la page d'accueil de votre site >> Cliquez sur "Inspecter"

Si vous n'êtes pas familiarisé avec l'outil Google Chrome Inspecter (également appelé «Outils de développement Google Chrome»), il s'agit d'une ressource phénoménale car elle permet à quiconque d'identifier la création de chaque ligne de code sur un site Web.Par exemple, si vous cliquez avec le bouton droit de la souris sur une page Web, cliquez sur "Inspecter", puis cliquez sur la petite icône du curseur situé dans le coin de la gauche à gauche des outils de développeur, vous pouvez cliquer sur n'importe quel élément de votre page pour voir quelle pièce decode le créé.

De plus de cela, vous pouvez double-cliquer sur n'importe quelle ligne de code, le modifier, appuyer sur Entrée et tester la manière dont la page Web ressemblerait si vous avez réalisé cette modification.Qu'est-ce que c'est?L'outil d'inspection est impressionnante! Wow, tu lis dans mes pensées. Nous allons utiliser les outils de développement de Google Chrome pour identifier les sélecteurs CSS que nous devons référencer dans notre document style.css afin d'apporter des modifications.

P.s.Bien que nous utilisions des outils de développement de Google Chrome, Firefox et Internet Explorer ont des outils très similaires.

P.P.S. Pour les besoins de ce tutoriel, nous garderons notre site WordPress dans les mêmes conditions qu'il était lorsque nous l'avons activé pour la première fois, et nous n'apporterons que les deux changements mentionnés dans l'introduction de ce billet de blog.

P.p.p.s.Une autre chose que nous aimerions aborder concernant les documents CSS: Saviez-vous que les navigateurs ont lu des documents CSS de haut en bas?De même, les navigateurs ont lu la CSS contenue dans les documents de style.css des thèmes de l'enfant comme si le code était inférieur au code CSS contenait dans le document STYLE.CSS de la mère.En d'autres termes, le code que vous avez dans le domaine de votre enfant de style.CSS est toujours remplacé par le document STYLE.CSS du thème parent.

Whoa, quel long P.P.P.S. Tant pis! Comme indiqué précédemment, nous allons changer deux choses pour notre site. Voici le n ° 1:

1. Disons-nous, par exemple, vous trouverez nécessaire que toutes vos en-têtes soient secoueuses lorsque les utilisateurs de votre site Web survolent.

Collez le code suivant dans votre document style.css pour y parvenir:

123456789101112131415161718192021222324 h2: survol {perspective: 900px; Visibilité de la face arrière: cachée; transform: translate3d (0, 0, 0); animation: secouer 0,70 s cube-bezier (.25, .10, .17, .88) les deux;} @keyframes secoue {12%, 88% {transform: translate3d (-2px, 0, 0); } 19%, 82% {transform: translate3d (3px, 0, 0); } 32%, 53%, 68% {transform: translate3d (-3px, 0, 0); } 42%, 58% {transform: translate3d (3px, 0, 0); }}

Tout d'abord, remarquez le sélecteur "H2".Nous avons utilisé les outils de développeurs Google Chrome pour déterminer le sélecteur à faire référence à ce code.Deuxièmement, vous pouvez ajuster les chiffres dans le code ci-dessus pour rendre les en-têtes secouez plus rapidement ou plus lentement.Enfin, assurez-vous de cliquer sur le bouton "Enregistrer les modifications" après avoir collé le code dans le document.

2. La deuxième chose que nous allons faire est la suivante: nous allons inverser les couleurs de notre image de page d'accueil lorsque les utilisateurs volent dessus en ajoutant les lignes de code suivantes à notre document de style nouvellement créé.CSS.Appuyez sur "Enregistrer les modifications" lorsque vous avez tous terminé de copier et de coller.

123 img: hover {filtre: inverser (100%);}

Et c'est ainsi que vous faites un thème glorieux et efficace de l'enfant!Vous êtes tous définis et que votre site a des touches personnalisées qui ne seront pas effacées lorsque vous installez une mise à jour WordPress en avance.Actualisez votre page une fois que vous avez pris ces étapes et remarquez à quel point il est incroyablement refroidi lorsque vous survolez une rubrique, et qu'il shacrit.Notez à quel point il est incroyablement magique lorsque vous allumez sur l'image sur votre page d'accueil et ses couleurs inverser.Ce site mis à jour est maintenant, comme les enfants disent ces jours-ci, "Lit".

(Word) Appuyer sur

Tu n'aimes pas juste un grand jeu de mots dans un blog en tête?Qu'est-ce que c'est?Les jeux de mots sont incroyablement ringard, mais incroyable?Comme les enfants disent ces jours-ci, "vrai dat ... bro."

Sur une note profondément différente, voici une citation de la page d'hébergement WordPress sur notre site Web:

"L'hébergement Web WordPress est adapté à ceux qui souhaitent obtenir rapidement un site WordPress, afin qu'ils puissent commencer à construire, concevoir ou à la mettre à jour. Utilisation du programme d'installation des applications softaculeuses à partir de votre compte CPanel, vous pouvez installer WordPress sur votre compte d'hébergement et commencerUtilisation de ce logiciel libre sur un serveur optimisé pour la disponibilité et surveillé par Hostwinds 24h / 24/365. "

L'équipe Hostwinds a spécifiquement formulé notre hébergement WordPress pour qu'il soit pratique pour les gens de créer un site Web WordPress sans se soucier de configurer leurs serveurs pour qu'ils soient compatibles avec WordPress. D'ailleurs, tout ce que crée Hostwinds est spécifiquement formulé pour simplifier les procédures d'hébergement pour nos clients.

Maya Angelou a résumé la façon dont notre équipe a l'impression d'aider nos précieux clients quand elle a dit: "Si vous le trouvez dans votre cœur de prendre soin de quelqu'un d'autre, vous aurez réussi."

Cela compte vraiment pour notre personnel que vous avez une expérience sterling lors de l'utilisation de nos services. Nous considérons notre société avec succès lorsque nous avons amélioré la vie de nos clients d'une manière ou d'une autre. Dans cet esprit, sachez que lorsque vous créez un thème de WordPress Child, vous êtes toujours plus que bienvenu pour contacter notre équipe d'experts à tout moment, 24h / 24 et 7j / 7 via un chat en direct, un téléphone ou une assistance de support si vous avez besoin d'aide. Nous sommes toujours là pour vous.

Écrit par Hostwinds Team  /  juillet 12, 2019