WordPressでブログレイアウトをデザインする方法

私はちょっとプロジェクトに保管されていて、WordPressのテーマをデザインして作成していましたが、ウィジェットのサイドバーとメニューの面をインストールできましたが、可能な場合は、私のブートストラップコードはこのように見えます。foreach()パラメータをすべてのブログ投稿を表示することを意味します。WordPressでブログレイアウトをデザインする方法

<div class="pc-version"> 
    <div class="media"> 
    <div class="media-left"> 
    <div class="hovereffect"> 


       <a href="#"> 
        <img class="media-object" src="img/1.jpg" alt="..."></a> 
      <div class="overlay"> 
      <h2>Share</h2> 
      <p class="icon-links"> 
       <a href="#"> 
        <span class="fa fa-twitter"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-facebook"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-instagram"></span> 
       </a> 
      </p> 
     </div> 

      </div> 
      </div> 
     <div class="media-body"> 
      <h4 class="media-heading">5 marketing strategy that Would "freak you out.</h4> 
      <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
       Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo. 
       Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex. 
      </div> 
    </div> 

    <div class="media"> 
    <div class="media-left"> 
    <div class="hovereffect"> 


       <a href="#"> 
        <img class="media-object" src="img/2.jpg" alt="..."></a> 
      <div class="overlay"> 
      <h2>Share</h2> 
      <p class="icon-links"> 
       <a href="#"> 
        <span class="fa fa-twitter"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-facebook"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-instagram"></span> 
       </a> 
      </p> 
     </div> 

      </div> 
      </div> 
     <div class="media-body"> 
      <h4 class="media-heading">6 resons we all love Califonia</h4> 
      <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
       Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo. 
       Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex. 
      </div> 
    </div> 

    <div class="media"> 
    <div class="media-left"> 
    <div class="hovereffect"> 


       <a href="#"> 
        <img class="media-object" src="img/3.jpg" alt="..."></a> 
      <div class="overlay"> 
      <h2>Share</h2> 
      <p class="icon-links"> 
       <a href="#"> 
        <span class="fa fa-twitter"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-facebook"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-instagram"></span> 
       </a> 
      </p> 
     </div> 

      </div> 
      </div> 
     <div class="media-body"> 
      <h4 class="media-heading">Vacation vs' Home coming :-) </h4> 
      <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
       Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo. 
       Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex. 
      </div> 
    </div> 

    <div class="media"> 
    <div class="media-left"> 
    <div class="hovereffect"> 


       <a href="#"> 
        <img class="media-object" src="img/4.jpg" alt="..."></a> 
      <div class="overlay"> 
      <h2>Share</h2> 
      <p class="icon-links"> 
       <a href="#"> 
        <span class="fa fa-twitter"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-facebook"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-instagram"></span> 
       </a> 
      </p> 
     </div> 

      </div> 
      </div> 
     <div class="media-body"> 
      <h4 class="media-heading">the real way to eat pancakes</h4> 
      <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
       Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo. 
       Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex. 
      </div> 
    </div> 

    <div class="media"> 
    <div class="media-left"> 
    <div class="hovereffect"> 


       <a href="#"> 
        <img class="media-object" src="img/5.jpg" alt="..."></a> 
      <div class="overlay"> 
      <h2>Share</h2> 
      <p class="icon-links"> 
       <a href="#"> 
        <span class="fa fa-twitter"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-facebook"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-instagram"></span> 
       </a> 
      </p> 
     </div> 

      </div> 
      </div> 
     <div class="media-body"> 
      <h4 class="media-heading">Sklic , slim tall and skiny Girls - "my Source of joy" at Miama</h4> 
      <p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio. 
       Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo. 
       Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex. 
      </div> 
    </div> 
    </div>

誰もがサムネイルコードを配置すると、WordPressは非常に感謝される、可能になっているすべてのポストコードを表示してください。

出典

2016-10-05 Neon Emmanuel

wordpressでサムネイルを取得するには、the_post_thumbnail（）を使用します。

すべての投稿を取得するには、wp_queryまたはget_posts（）を使用してから、have_postsでループを使用します。コードの一部を保存

<?php 
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
    $args = array('post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged); 
    $query = new WP_Query($args); 
    if($query->have_posts()) : 
    while($query->have_posts()) : $query->the_post(); ?> 
    <div class="media"> 
    <div class="media-left"> 
    <div class="hovereffect"> 


     <a href="#"><?php the_post_thumbnail();?></a> 
     <div class="overlay"> 
      <h2>Share</h2> 
      <p class="icon-links"> 
       <a href="#"> 
        <span class="fa fa-twitter"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-facebook"></span> 
       </a> 
       <a href="#"> 
        <span class="fa fa-instagram"></span> 
       </a> 
      </p> 
     </div> 

    </div> 
    </div> 
    <div class="media-body"> 
     <h4 class="media-heading"><?php the_title()?></h4> 
     <p class="media-author"><b><?php the_author()?></b> - <?php echo get_the_date(); ?></p> 
      <?php the_content();?> 
     </div> 
    </div> 
    <?php endwhile;?> 
<!-- pagination --> 
<?php next_posts_link(); ?> 
<?php previous_posts_link(); ?> 
<?php else : ?> 
<!-- No posts found --> 
<?php endif; ?>

出典

2016-10-05 21:30:51

生活、おかげでそんなに私はこの種の私の問題を考えて、私はそれに50ワードカウントの抜粋を追加するにはどうすればよい、単語はアルファベットでない回数をカウントしてくださいしてください。 –

addタイトルに加えて、各投稿へのクリック可能なリンクではありません。ハイパーテキストリンクになるにはタイトルが必要です。 –

https://codex.wordpress.org/Function_Reference/でタイトルをラップしてくださいthe_permalink –

WordPressでブログレイアウトをデザインする方法

答えて

関連する問題