Comment donner du css pour les articles dans un thème wordpress

Publié par Jean-Michel le

Je débute dans le développement wordpress, j’ai développé un thème wordpress personnalisé mais je ne suis pas en mesure de donner du css aux messages.

Les messages apparaissent de manière basique

   <?php get_header(); ?>

  <div id="primary" class="content-area">
   <main id="main" class="site-main" role="main">
    <?php
    // Start the loop.
    while ( have_posts() ) : the_post();

        // Include the page content template.
        get_template_part( 'template-parts/content', 'page' );

        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || get_comments_number() ) {
            comments_template();
        }

        // End of the loop.
    endwhile;
    ?>

</main><!-- .site-main -->
<?php get_footer(); ?>

J’ai ajouté des images sur la façon dont les messages apparaissent et le code de page.php de mon thème wordpress. Chercher de l’aide

Solution n°1 trouvée

Vous devez suivre la norme de codage wordpress pour créer un thème et des plugins. Pour ajouter css et js, créez simplement deux dossiers dans votre thème nommés ‘js’ et ‘css’. Ajoutez ensuite ce code à l’intérieur du functions.php

if(!function_exists('theme_style')):
    function theme_style(){
        wp_enqueue_script('main-js', get_template_directory_uri().'/js/main.js',array(),false,true);
        wp_enqueue_style( 'main-css', get_template_directory_uri(). '/css/main.css', array(),false,'all' );
    }
    add_action('wp_enqueue_scripts','theme_style');
endif;

Vous pouvez changer le nom du fichier main.js et main.css

Solution n°2 trouvée

Ajoutez un répertoire css dans le répertoire de votre thème, laissez créer un nom de fichier « poststyle.css » dans ce répertoire css, puis vous pouvez lier le fichier css dans header.php

    <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/poststyle.css" media="screen" title="post-style" charset="utf-8">

OR
    <?php
     wp_enqueue_style( 'post-styles' , get_template_directory_uri() . 'css/poststyle.css' );
    ?>

mais avant cela, vous devez trouver la classe ou l’id ou le nom de div afin que vous puissiez donner ou définir les styles à ces div ou classes correspondantes à l’intérieur de « poststyle.css »

Maintenant, prenez cet exemple

<?php
/**
 * The template for displaying pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
        <?php  while ( have_posts() ) : the_post(); ?>
            <div class="title"><?php the_title( '<h1>', '</h1>' ); ?></div>
                 <div class="pic">      <?php echo get_the_post_thumbnail( get_the_ID() , 'thumbnail' , array('class' => 'img-thumbnail') ); ?></div>
              <div class="content"> <?php the_content() ; ?></div>
        <?php endwhile; // end of the loop. ?>
    </div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Vous pouvez maintenant donner des styles à class= »site-content » ou class= »content-area » , class= »title », class= »content »


Mais dans le cas de votre modèle de publication, ce que vous avez fait est que vous importez un autre modèle qui se trouve dans le fichier content.php du répertoire template-parts où tout le contenu de la publication montrant les codes est là

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *