Images dans la conception de thème enfant wordpress

De nombreux thèmes utilisent des images pour ajouter de belles touches à un design WordPress. En règle générale, vous ajoutez ces images à la images répertoire à l`intérieur du thème. Tout comme un thème parent peut se référer aux images dans son style.css fichier, vos thèmes enfants peuvent avoir leur propre répertoire d`images. Voici des exemples de la façon dont ces images peuvent être utilisées.

Comment utiliser une image de thème enfant dans un thème enfant stylesheet

Y compris une image de thème enfant dans un thème enfant est stylesheet commun. Pour ce faire, il suffit d`ajouter la nouvelle image est le thème enfant images répertoire et y faire référence dans le thème d`enfant style.css fichier. Pour avoir une idée de la mécanique de ce processus, procédez comme suit:

  1. Créé un images répertoire dans le répertoire du thème enfant / wp-content / themes / twentythirteen-enfant / images.

  2. Ajouter une image dans le répertoire.

  3. Ajouter le style nécessaire pour le thème de l`enfant style.css fichier, comme suit:

/ * Thème: TwentyThirteen ChildDescription: mon fabuleux enfant themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentythirteen * / @ import url ( » ../ twentythirteen / style.css `) - body {background: url (` images / body -bg.jpg `) répéter-X-}

Avec un rafraîchissement rapide du site, il a maintenant un nouvel arrière-plan. Vous pouvez voir comment l`arrière-plan a changé de blanc uni à une image rayé blanc et beige.

Comment utiliser une image de thème parent dans un thème enfant stylesheet

images thème des enfants sont acceptables pour la plupart des buts. Parfois, cependant, vous êtes mieux d`utiliser les images fournies par le thème parent. Vous pouvez simplement copier le dossier d`image thème parent, avec toutes ses images, le thème de l`enfant, mais souhaitez empêcher le thème des enfants de correspondre le thème parent si l`image thème parent change jamais, comme après une mise à niveau.

Heureusement, vous pouvez vous référer à une image dans le thème parent avec le @importer la règle de la même façon, vous pouvez le thème parent style.css fichier.

Dans la zone de menu de navigation de la conception Vingt Treize, une icône de loupe apparaît sur le côté droit qui désigne la zone de recherche - les utilisateurs cliquent pour afficher le formulaire de recherche. Ceci est une image de thème parent.

Video: Créer un thème enfant wordpress

Dans cet exemple, vous ajoutez l`icône de loupe devant le titre de poste. Parce que l`image de l`icône existe déjà à l`intérieur du thème parent, vous pouvez simplement ajouter une personnalisation sur le thème d`enfant style.css fichier pour faire ce changement, comme suit:

/ * Thème Nom: TwentyThirteen ChildDescription: mon fabuleux enfant themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentythirteen * / @ import url ( » ../ twentythirteen / style.css `) - entrée-titre {background:. Url (` ../twentythirteen/images/search-icon.jpg `) centre gauche no-repeat-padding-left: 30px;}

Enregistrez le fichier et actualisez votre site pour montrer la loupe avant le titre d`entrée.

Comment utiliser une image de thème enfant dans un thème parent stylesheet

Dans les exemples précédents, on peut se demander si le remplacement d`une image utilisée dans la feuille de style du parent avec celle qui se trouve dans le répertoire du thème des enfants est possible. Cela nécessiterait une modification de la stylesheet- du thème parent l`idée même derrière un thème enfant est d`éviter des changements au parent, donc non, ce n`est pas possible.

Cependant, vous pouvez remplacer la règle du thème parent de se référer à la nouvelle image de thème enfant en créant simplement une règle primordiale dans la feuille de style du thème enfant qui pointe vers la nouvelle image.

Ci-dessus, vous placez l`icône de loupe à gauche du titre d`entrée. Prenez qu`une étape further- l`icône de loupe à côté du titre d`entrée est faible. Vous pouvez faire mieux avec une icône plus grande. Pour cet exemple, utilisez un icône différente loupe que vous pouvez télécharger. droit, cliquez sur l`image dans votre navigateur pour enregistrer sur votre ordinateur local.

Video: Créer un thème enfant pour le thème WordPress Writer

Après avoir ajouté l`image désirée dans le répertoire de votre thème enfant images comme grossissant glass.jpg, le suivant style.css fichier remplace l`icône en forme de loupe du thème parent avec le nouveau vous venez de télécharger:

/ * Thème: TwentyThirteen ChildDescription: mon fabuleux enfant themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentythirteen * / @ import url ( » ../ twentythirteen / style.css`) - entrée-titre {background:. Url (images /magnifying-glass.jpg) centre gauche no-repeat-padding-left: 50px;}

Remarquez comment certaines règles au-delà l`arrière-plan sont modifiés pour remplacer un style de thème parent qui ne fonctionne pas bien avec la nouvelle icône, comme l`ajout de padding-left: 50px - qui est mis en place pour fournir un espacement correct pour la loupe. Maintenant, votre thème enfant montre la nouvelle loupe à gauche du titre d`entrée. Le nouveau look est assez bien si vous me demandez.

Vous ne pouvez pas remplacer directement les images à thème parent. Au contraire, vous devez fournir une nouvelle image dans le thème de l`enfant et de passer outre le style du parent de se référer à cette nouvelle image.

Articles connexes