\n\n\n\n\n\n
Comment créer un thème WordPress ?<\/h2>\n
Pour créer un thème WordPress, il faut créer un nouveau dossier dans wp-content\/themes. Dans ce dossier, créez un fichier style css et un fichier index.php.<\/strong>. Ajoutez des styles CSS au fichier style.css et du code HTML et PHP au fichier index.php. Créez des fichiers de modèle supplémentaires si nécessaire.<\/p>\n <\/div>\n\n\n\n<\/p> Les appareils ont généralement des écrans différents, et chacun d’entre eux varie en termes de résolution, de fonctionnalité et de couleur. Certains fonctionnent en mode paysage, tandis que d’autres – en mode portrait. En outre, de nombreux appareils peuvent passer d’un mode à l’autre.<\/p> Pour cette raison, il est primordial de créer un thème WordPress personnalisé qui est réactif aux différentes résolutions d’écran.<\/p> Le design responsive fait référence à l’affichage de votre site internet dans le meilleur format pour les visiteurs en fonction de la taille de leur écran. La mise en forme répond à l’espace disponible, et le contenu est placé correctement – rien n’est coupé, débordant, et votre site internet semble aussi propre que possible.<\/p> Pour mesurer un alignement réactif pour votre conception, vous devez considérer la mise en page de votre site internet comme une série de grilles plutôt que de pixels (px). Ensuite, divisez la largeur des grilles pour chaque section de contenu en pourcentages (%).<\/p> Pour les images, vous pouvez leur attribuer une largeur maximale de 100 % de leur taille réelle et et régler la hauteur sur auto. La largeur et la hauteur de l’image seront automatiquement ajustées lorsque la taille de l’écran sera réduite. Ainsi, si vous placez une image de 200px de large à l’intérieur d’un div<\/strong> qui occupe 100% de l’écran, elle restera affichée dans sa largeur réelle.<\/p> Voici un exemple de bonne<\/strong> et de mauvaise<\/strong> syntaxe pour créer un design responsive :<\/p> En tenant compte de ce qui précède, appliquons ces principes de design réactif pour la création d’un thème WordPress avec HTML5 et CSS3.<\/p> HTML5<\/a> est la dernière version de la langue de balisage Web HTML qui permet d’afficher le contenu de manière cohérente sur tout ordinateur, tablette ou téléphone mobile.<\/p> En outre, HTML5 offre une fonctionnalité de balise meta viewport qui contrôle l’affichage de votre site sur chaque navigateur avec la balise <meta><\/strong> à l’intérieur de la balise <head><\/head><\/strong>.<\/p> Pour créer un thème WordPress personnalisé entièrement responsive, vous pouvez également utiliser la fonctionnalité CSS3 media queries. Elle définit des règles spécifiques et contrôle la façon dont votre site se comportera sur différentes tailles d’écran.<\/p> Considérez l’installation locale lors du développement d’un thème WordPress. C’est un excellent moyen d’expérimenter des thèmes WordPress sans craindre d’endommager votre site internet en direct. De plus, vous n’avez pas besoin d’avoir un nom de domaine ou un hébergement web avant de vouloir mettre votre site en ligne.<\/p> Ceci étant dit, passons aux étapes de la création d’un thème WordPress personnalisé. Nous appliquerons à la fois la balise meta viewport et les media queries lors de sa création.<\/p> En général, les thèmes WordPress peuvent être créés à l’aide de deux fichiers modèles dans le répertoire du thème :<\/p> Cependant, le développement d’un thème WordPress nécessitera également plusieurs fichiers de support pour ajouter plus de flexibilité lors de la personnalisation. Ces fichiers modèles comprennent :<\/p> En tant que développeur du thème, vous êtes libre de personnaliser chaque fichier modèle. WordPress va ensuite choisir et générer des modèles en fonction de la hiérarchie des fichiers modèles<\/a>. Il les parcourra jusqu’à ce qu’un fichier correspondant soit trouvé, et affichera la page en conséquence.<\/p> En gardant cela à l’esprit, créez un nouveau dossier pour les composants dans votre dossier themes<\/strong> WordPress avant de créer un thème WordPress à partir de zéro.<\/p> \n\n\n Le nom du dossier ne doit pas être le même que celui d'un autre thème. De plus, si vous envisagez de partager votre travail, vérifiez qu'il n'y a pas de thème portant le même nom dans le répertoire des thèmes<\/a> de WordPress.org. <\/p>\n <\/div>\n\n\n\n<\/p> Une fois que vous avez un dossier pour stocker le thème, créez les fichiers modèles WordPress essentiels. Chaque fichier modèle PHP doit utiliser le nom correct tel que défini dans la documentation de WordPress.<\/p> Notez que pour réaliser des mises en page différentes pour vos articles, vos pages et les autres parties de votre site internet, vous devez créer des modèles distincts contenant du HTML5 et du PHP qui s’appliquent à chaque section.<\/p> \n\n\n Si vous souhaitez utiliser des types d'articles personnalisés, vous pouvez créer des modèles qui s'appliquent uniquement aux articles de ce type. Cependant, si vous souhaitez que les articles d'une catégorie spécifique aient des styles différents, utilisez des instructions if-then à l'intérieur de la boucle. <\/p>\n <\/div>\n\n\n\n<\/p> Maintenant, passons aux étapes :<\/p> 1. Accédez à la section Gestionnaire de fichiers<\/strong> de votre hPanel<\/a>. Ensuite, allez dans le dossier public_html<\/strong> -> wp-content<\/strong> -> themes<\/strong>. Maintenant que tous les fichiers PHP du modèle sont prêts, passons à la configuration de la feuille de style CSS.<\/p> Les feuilles de style CSS<\/a> contrôlent la conception visuelle et la mise en page des pages d’un site web. Chaque thème WordPress a besoin d’une feuille de style afin d’afficher des éléments tels que les polices et les couleurs. Sans fichier CSS, WordPress ne reconnaîtra pas votre thème personnalisé comme un thème valide.<\/p> Dans cette optique, créez un fichier CSS dans le même dossier de thème. Ajoutez les informations nécessaires, notamment le nom du thème, sa version, sa description et son auteur en haut du fichier style.css<\/strong>. WordPress affichera ces détails dans le panneau de configuration de l’administrateur.<\/p> Les informations doivent être écrites sous forme de commentaire CSS multi-lignes, chaque en-tête dans sa propre ligne, en commençant par un mot-clé. <\/p> Voici un exemple :<\/p> \n\n\n Les deux dernières lignes sont obligatoires si vous souhaitez partager votre thème sur WordPress.org. Si vous comptez utiliser le thème pour votre propre site web WordPress, vous n'avez pas besoin de les inclure. <\/p>\n <\/div>\n\n\n\n<\/p> À ce stade, votre thème sera déjà visible sur votre tableau de bord WordPress. Allez dans Apparence<\/strong> -> Thèmes<\/strong> et vous verrez My Theme<\/strong> avec une image de boîte à cocher blanche et grise.<\/p> Cependant, vous obtiendrez une page d’accueil vide si vous activez le thème. Cela est dû au fait que votre fichier index.php<\/strong> est vide et qu’il n’y a pas de modèles disponibles.<\/p> Ajoutez une seule règle au fichier CSS qui modifie la couleur d’arrière-plan de la page. Insérez une ligne vierge après la fermeture du commentaire *\/<\/strong> sur la 10e ligne. Ensuite, collez le code suivant en dessous :<\/p> Comprenons ce code en le décomposant.<\/p> La première entrée est un élément important du style responsive. <*><\/strong>, ou le symbole de l’astérisque, correspond à chaque élément du document HTML. Il indique que la largeur et la hauteur finales de chaque élément de la page doivent inclure le contenu, le remplissage et la bordure. Par conséquent, cette règle ajoute effectivement le remplissage à l’intérieur de la boîte au lieu de l’extérieur.<\/p> Le deuxième élément modifie la couleur d’arrière-plan en blanc et définit la police par défaut qui sera utilisée dans le thème.<\/p> Gardez à l’esprit que le code ci-dessus ne fait qu’ajouter des éléments de base à votre thème personnalisé. Nous reviendrons au fichier style.css<\/strong> une fois que nous aurons configuré les autres fichiers et que la structure globale du site internet sera prête.<\/p> Avant le processus de développement du thème WordPress, nous vous recommandons d’ajouter quelques lignes de code à vos fichiers functions.php<\/strong> et sidebar.php<\/strong> pour améliorer la flexibilité du thème. Par exemple, ajoutez des zones widgétisées ou créez des vignettes d’articles et des images mises en avant sur des pages spécifiques.<\/p> functions.php<\/strong><\/p> Chaque navigateur possède des paramètres par défaut différents pour des éléments tels que les marges et le remplissage des pages. Pour cette raison, vous devez effectuer une normalisation CSS pour vous assurer que votre thème a le même style et le même comportement sur tous les navigateurs.<\/p> Pour ce faire, incluez un fichier CSS nommé normalize.css<\/strong> dans votre fichier functions.php<\/strong>. Ce fichier permettra aux navigateurs d’afficher votre site de manière cohérente, quels que soient ces éléments.<\/p> Pour en créer un, insérez le code suivant dans le fichier functions.php :<\/strong><\/p> Ce code demandera à WordPress de choisir le fichier normalize.css<\/strong> à partir de la source jointe<\/a>.<\/p> Ensuite, activez les widgets de la colonne latérale en ajoutant le code suivant après la fonction précédente :<\/p> \n\n\n Important!<\/strong> Si vous omettez cet extrait de code, le lien du menu des widgets ne sera pas visible dans le panneau de configuration de l’administrateur, et vous ne pourrez pas ajouter de widgets.<\/p><\/div>\n\n\n\n<\/p> Ensuite, enregistrez un menu de navigation personnalisé pour activer la fonction Apparence -> Menu. Ajoutez le code suivant :<\/p> Une fois terminé, enregistrez et fermez<\/strong> le fichier.<\/p> sidebar.php<\/strong><\/p> La prochaine chose dont vous devez prendre soin lors de la création de votre propre thème WordPress est l’affichage des barres latérales. Pour ce faire, utilisez la fonction get_sidebar()<\/strong> – elle permet à la barre latérale et aux widgets d’apparaître n’importe où dans votre thème.<\/p> Insérez le code ci-dessous dans le fichier sidebar.php<\/strong>. Ensuite, enregistrez les modifications.<\/p> La première ligne indique à WordPress que si la barre latérale n’existe pas, elle ne doit pas être affichée. La deuxième définit les attributs de l’élément contenant les widgets. La troisième ligne est la fonction de WordPress pour afficher la barre latérale.<\/p> Nous allons maintenant passer à la mise en forme de votre thème WordPress en modifiant les fichiers header.php<\/strong>, index.php<\/strong>, footer.php<\/strong>, single.php<\/strong>, page.php<\/strong>, style.php<\/strong> à l’aide de media queries.<\/p> header.php<\/strong><\/p> Le fichier header.php<\/strong> définira le haut de notre document. Il doit avoir :<\/p> Il existe de nombreuses techniques pour rendre un thème WordPress responsive. L’une d’entre elles consiste à utiliser des balises méta. Insérez la balise méta suivante sous le titre de votre article pour que votre site internet s’adapte automatiquement aux tailles d’écran et aux viewports les plus petites :<\/p> Une fois ajoutée, vous aurez un site compatible avec tous les navigateurs et réactif aux mobiles.<\/p> Le fichier header.php<\/strong> final ressemblera à ceci :<\/p> Si vous souhaitez utiliser un logo comme header, remplacer <?php bloginfo(‘name’); ?><\/strong> par le code de l’image à l’intérieur des balises <header><\/strong>.<\/p> index.php<\/strong><\/p> Le fichier index.php<\/strong> définit la page d’accueil. Il sera également utilisé comme mise en page par défaut si des modèles spécifiques tels que single.php<\/strong> et page.php<\/strong> ne sont pas trouvés.<\/p> Utilisez les marqueurs de modèle, telles que get_header<\/strong>, get_sidebar<\/strong> et get_footer<\/strong>, pour vous assurer que le code de l’en-tête, de la barre latérale et du pied de page est inclus dans votre page d’accueil. Vous devrez également insérer les éléments sémantiques HTML5 <section><\/strong> , <main><\/strong> , <header><\/strong> et <article><\/strong> .<\/p> Certains de ces éléments se verront attribuer des classes, qui seront écrites dans le fichier style.css<\/strong>.<\/p> Important! <\/strong>Les balises d’en-tête peuvent être utilisées plusieurs fois sur une même page et ne font pas spécifiquement référence à l’en-tête de la page. Les sections et les articles devraient avoir les éléments d’en-tête s’il y a du texte à l’intérieur de h1, h2, etc. S’il n’y a pas de texte d’en-tête dans une section ou un article, ces balises peuvent être omises.<\/p> Pour afficher une liste d’articles et leurs extraits avec plus de marqueurs de modèle, vous devrez utiliser la boucle WordPress. En faisant cela, vous appellerez également les derniers articles sur la page d’accueil.<\/p> Ainsi, la syntaxe finale du fichier index.php<\/strong> ressemblera à ceci :<\/p> Dans le code ci-dessus, La boucle commence à <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <\/strong> et se termine à <?php endif; ?> <\/strong>. <\/em><\/p> Pour plus de détails, consultez les marqueurs de modèle suivantes utilisées à l’intérieur de la boucle :<\/p> Nous en apprendrons davantage sur les marqueurs de modèle<\/a> et les boucles<\/a> WordPress plus tard.<\/p> footer.php<\/strong><\/p> Ce fichier est l’endroit où vous devez définir le pied de page de chaque page. Il ferme toutes les balises <body><\/strong> et <html><\/strong> qui sont encore ouvertes depuis le fichier header.php<\/strong>. Sans ce fichier PHP, vous remarquerez que la barre d’administration est absente lorsque vous visitez votre page d’accueil, vos articles ou vos pages.<\/p> Définissez votre pied de page en utilisant l’élément sémantique HTML5 <footer> <\/ footer><\/strong>. Pour s’assurer que tout code final de WordPress et JavaScript est ajouté à la page, il doit également inclure le crochet d’action wp_footer()<\/strong>.<\/p> L’enregistrement de ce fichier fermera toutes les balises HTML ouvertes dans les autres fichiers de modèle.<\/p> Nous parlerons davantage des crochets d’action plus tard dans ce tutoriel.<\/p> single.php<\/strong><\/p> Le fichier single.php<\/strong> détermine la mise en page de tous les types de publications dans WordPress. En plus des articles de blog, il définit les custom post types WordPress<\/a><\/strong>, comme une page de produit sur une boutique en ligne.<\/p> Ici, nous utiliserons la fonction the_content()<\/strong> pour afficher l’article complet. Cependant, nous n’ajouterons pas la barre latérale aux articles et nous supprimerons également le lien sur le titre.<\/p> Le code PHP complet doit ressembler à ceci :<\/p> Une fois sauvegardé, vos articles seront affichés sur une seule page sans barre latérale.<\/p> page.php<\/strong><\/p> Le fichier page.php<\/strong> décrit la façon dont les pages sont affichées. Il peut être différent de l’index et de la mise en page des articles.<\/p> \n\n\n N'oubliez pas que si le fichier page.php n'existe pas, le modèle index.php sera utilisé à la place. De plus, les pages de votre site web n'utiliseront pas la même mise en page que celle utilisée dans le fichier single.php. <\/p>\n <\/div>\n\n\n\n<\/p> Pour rendre les différences plus visibles, nous allons à nouveau ajouter la barre latérale à cette mise en forme et faire en sorte que le contenu de la page occupe 70 %<\/strong> de la largeur de la page.<\/p> Ajoutez le code suivant au fichier page.php<\/strong> :<\/p> Une fois enregistré, vous aurez une mise en page dédiée pour vos pages.<\/p> Dans la section précédente, nous avons mentionné le fichier CSS. Ce fichier contrôle la conception et la mise en page de votre site web. Puisque nous avons déjà ajouté du code au fichier, nous allons maintenant modifier le design.<\/p> Pour ce faire, ajoutez le code suivant au bas du fichier style.css<\/strong> :<\/p> Une fois sauvegardé, les différentes cases auront un fond blanc et une bordure bleue.<\/p> \n\n\n Expérimentez en modifiant le style CSS et la largeur pour voir comment votre thème réagit à diverses situations. Pour ce faire, ajoutez un CSS personnalisé<\/a> à votre site web à l'aide d'un plugin WordPress ou de l'outil de personnalisation de thème. <\/p>\n <\/div>\n\n\n\n<\/p> Maintenant que vous avez la feuille de style et tous les modèles nécessaires prêts, vous pouvez facilement naviguer dans vos articles et vos pages. Votre nouveau thème personnalisé devrait ressembler à ceci :<\/p>Qu’est-ce qu’un design responsive ?<\/span><\/h2>
\/* GOOD WIDTH *\/\n.inline-text-box {\n width: 50%;\n}\n\n\/* BAD WIDTH *\/\n.inline-text-box {\n width: 800px;\n}\n\n\/* GOOD IMAGE *\/\nimg {\n max-width: 100%;\n height: auto;\n}\n\n\/* BAD IMAGE *\/\nimg {\n width: 100%;\n height: auto;\n}<\/pre>Comment créer un thème WordPress responsive en 5 étapes avec HTML5 et CSS3<\/h2>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>1. Créer et stocker les fichiers modèles (templates)<\/h3>
\n
\n
Conseil de pro<\/h4>\n
Conseil de Pro<\/h4>\n
2. Créez un nouveau dossier. Notez que le dossier doit avoir un nom unique, descriptif et court. N’utilisez pas de chiffres ou d’espaces.
3. Nous utiliserons my-theme<\/strong> dans cet exemple.
4. Nous allons d’abord créer les modèles personnalisés et nous concentrer sur le contenu par la suite. Les fichiers comprennent header.php<\/strong>, index.php<\/strong>, footer.php<\/strong>, functions.php<\/strong>, sidebar.php<\/strong>, single.php<\/strong> et page.php<\/strong>.<\/p>![\"Gestionnaire](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/07\/wordpress-theme-3.png\/public\" "\\"Gestionnaire-de-fichiers-avec-fichiers-par-défaut-d-un-nouveau-thème-personnalisé\\"")
<\/figure>2. Configurer le fichier CSS initial<\/h3>
\/*\nTheme Name: My Theme\nAuthor: Hostinger\nAuthor URI: http:\/\/www.hostinger.com\/tutorials\nDescription: My first responsive HTML5 theme\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/pre>
Conseil de pro<\/h4>\n
![\"Menu](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/wordpress-theme.jpg\/public\" "\\"nouveau-thème-personnalisé")
<\/figure> * {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f9f9f9;\n font-family: Helvetica;\n}<\/pre>3. Rendre le thème WordPress fonctionnel<\/h3>
<?php\n\/\/ This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we\n\/\/ use an online version of the css file.\nfunction add_normalize_CSS() {\n wp_enqueue_style( 'normalize-styles', \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/7.0.0\/normalize.min.css\");\n}<\/pre>\/\/ Register a new sidebar simply named 'sidebar'\nfunction add_widget_Support() {\n register_sidebar( array(\n 'name' => 'Sidebar',\n 'id' => 'sidebar',\n 'before_widget' => '<div>',\n 'after_widget' => '<\/div>',\n 'before_title' => '<h2>',\n 'after_title' => '<\/h2>',\n ) );\n}\n\/\/ Hook the widget initiation and run our function\nadd_action( 'widgets_init', 'add_Widget_Support' );<\/pre>\/\/ Register a new navigation menu\nfunction add_Main_Nav() {\n register_nav_menu('header-menu',__( 'Header Menu' ));\n}\n\/\/ Hook to the init action hook, run our navigation menu function\nadd_action( 'init', 'add_Main_Nav' );<\/pre><?php if ( is_active_sidebar( 'sidebar' ) ) : ?>\n <aside id=\"primary-sidebar\" class=\"primary-sidebar widget-area\" role=\"complementary\">\n <?php dynamic_sidebar( 'sidebar' ); ?>\n <\/aside>\n<?php endif; ?><\/pre>
4. Créer une mise en page pour votre thème personnalisé<\/span><\/h3>
\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>
<!DOCTYPE html>\n<html <?php language_attributes(); ?>\n <head>\n <title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?><\/title>\n <meta charset=\"<?php bloginfo( 'charset' ); ?>\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\">\n <?php wp_head(); ?>\n <\/head>\n <body <?php body_class(); ?>>\n <header class=\"my-logo\">\n <h1><a href=\"<?php echo esc_url( home_url( '\/' ) ); ?>\"><?php bloginfo('name'); ?><\/a><\/h1>\n <\/header>\n <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?><\/pre><?php get_header(); ?>\n<main class=\"wrap\">\n <section class=\"content-area content-thin\">\n<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <article class=\"article-loop\">\n <header>\n <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title_attribute(); ?>\"><?php the_title(); ?><\/a><\/h2>\n By: <?php the_author(); ?>\n <\/header>\n <?php the_excerpt(); ?>\n <\/article>\n<?php endwhile; else : ?>\n <article>\n <p>Sorry, no posts were found!<\/p>\n <\/article>\n<?php endif; ?>\n <\/section><?php get_sidebar(); ?>\n<\/main>\n<?php get_footer(); ?><\/pre>
\n
<footer>\n <p>Copyright © 2017<\/p>\n <\/footer>\n <?php wp_footer(); ?>\n <\/body>\n<\/html><\/pre>
<?php get_header(); ?>\n<main class=\"wrap\">\n <section class=\"content-area content-full-width\">\n<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <article class=\"article-full\">\n <header>\n <h2><?php the_title(); ?><\/h2>\n By: <?php the_author(); ?>\n <\/header>\n <?php the_content(); ?>\n <\/article>\n<?php endwhile; else : ?>\n <article>\n <p>Sorry, no post was found!<\/p>\n <\/article>\n<?php endif; ?>\n <\/section>\n<\/main>\n<?php get_footer(); ?><\/pre>
Conseil de Pro<\/h4>\n
<?php get_header(); ?>\n<main class=\"wrap\">\n <section class=\"content-area content-thin\">\n<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <article class=\"article-full\">\n <header>\n <h2><?php the_title(); ?><\/h2>\n By: <?php the_author(); ?>\n <\/header>\n <?php the_content(); ?>\n <\/article>\n<?php endwhile; else : ?>\n <article>\n <p>Sorry, no page was found!<\/p>\n <\/article>\n<?php endif; ?>\n <\/section><?php get_sidebar(); ?>\n<\/main>\n<?php get_footer(); ?><\/pre>
5. Améliorer votre conception grâce à la feuille de style CSS<\/h3>
\/*\nTheme Name: My Theme1\nAuthor: Your Name\nAuthor URI: http:\/\/www.yourwebsite.com\nDescription: My first responsive HTML5 theme\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/\n\n* {\n box-sizing: border-box;\n\n}\n\nbody {\n background-color: #f9f9f9;\n font-family: Helvetica;\n}\n.my-logo,\nfooter {\n width: 100%;\n padding-left: 1%;\n margin-bottom: 8px;\n background-color: #78baff;\n border: 1px solid #78baff;\n}\nbody > header > h1 > a {\ncolor: #ffffff;\nfont-weight: 400;\n}\narticle > header {\n\n}\nfooter {\n margin-top: 4px;\n}\n\na {\n text-decoration: none;\n}\n\n\/* 'Margin: 0 auto' centers block content on the page *\/\n.wrap {\n width: 99%;\n margin: 0 auto;\n}\n\n.content-area {\n display: inline-block;\n}\n\n.content-thin {\n width: 70%;\n}\n\n.content-full-width {\n width: 100%;\n}\n\n.content-area,\n.primary-sidebar {\n display: inline-block;\n}\n\n.primary-sidebar {\n width: 25%;\n padding: 1%;\n vertical-align: top;\n background-color: #ececec;\n}\n\n.article-loop {\n width: 45%;\n text-align: left;\n margin: 5px;\n padding: 10px;\n}\n\n.article-full {\n width: 99%;\n padding: 1%;\n}\n\n.article-loop,\n.article-full {\n display: inline-block;\n vertical-align: top;\n background-color: #FFF;\n border-radius: 4px;\n margin-bottom: 4px;\n}<\/pre>Conseil de Pro<\/h4>\n
![\"aperçu](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/01\/theme-wordpress.jpg\/public\")
<\/figure><\/div>