WordPress : Conversion HTML vers ? WP
J’ai commencé à apprendre le développement de thèmes WP à partir d’un didacticiel vidéo wordpress sur Tutsplus.
Tout s’est bien passé, puis j’ai décidé de beaucoup pratiquer la conversion de thème HTML vers WP.
J’ai téléchargé ce modèle de bootstrap gratuit.
J’ai pu créer des menus header.php, footer.php, nav et de nombreuses fonctions que j’ai apprises ici, mais j’ai été frappé par la création de index.phpfichiers et content.phpla création de fichiers.
C’est le HTML qui est un peu un obstacle pour moi ?
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 18, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on August 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but its actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on July 8, 2014</p>
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
<a href="#">Older Posts →</a>
</li>
</ul>
</div>
</div>
</div>
<hr>
En fait, cette partie me dérange beaucoup que si elle ira index.phpou content.php?
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
Ma difficulté ?
La page d’accueil n’affiche pas les titres des articles comme dans le HTML, quelle est l’erreur. Voici mes fichiers index.phpet content.php?
INDEX.PHP ?
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package html2wpsecond
*/
get_header(); ?>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview">
<?php If ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php else: ?>
<?php get_template_part('content','none' ); ?>
<?php endif; ?>
</div>
<!-- Pager -->
<ul class="pager">
<li class="next">
<a href="#">Older Posts →</a>
</li>
</ul>
</div>
</div>
</div>
<hr>
<?php
get_sidebar();
get_footer();
CONTENU.PHP ?
<?php
/*
# =======================================
# content.php
#
# The Theme
# =======================================
*/
?>
<div id=post-<?php the_ID(); ?> <?php post_class('post col-md-6'); ?>>
<a href="<?php the_permalink( ); ?>" title="<?php the_title_attribute(); ?>" class="post-thumbnail">
<?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
</a>
<div class="post-preview">
<header>
<?php
echo '<a href="' . get_the_permalink() . '"><h3>' . get_the_title() . '</h3></a>';
blogeto_post_meta();
?>
</header>
<?php the_content(__('Read More', 'blogeto')); ?>
</div>
</div>
Solution n°1 trouvée
Remplacez le bloc « Contenu principal » dans index.php par ce qui suit. De cette façon, vous n’avez pas besoin d’un fichier content.php et pouvez interroger les publications directement dans index.php. La navigation dans les articles suivant/précédent sera également fonctionnelle.
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<?php
// Start the loop.
while ( have_posts() ) : the_post();
?>
<div class="post-preview">
<a href="<?php the_permalink(); ?>">
<h2 class="post-title">
<?php the_title(); ?>
</h2>
<h3 class="post-subtitle">
<?php the_excerpt(); ?>
</h3>
</a>
<p class="post-meta">Posted by <?php the_author(); ?> on <?php the_time('jS F Y') ?></p>
</div>
<?php
// End of the loop.
endwhile;
?>
<!-- Pager -->
<ul class="pager">
<li class="next">
<?php next_posts_link('« Older Entries') ?>
<?php previous_posts_link('Newer Entries »') ?>
</li>
</ul>
</div>
</div>
</div>
0 commentaire