ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

トップページのブログ一覧とお知らせ一覧の位置を入れ替える

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.トップページのブログ一覧とお知らせ一覧の左右の位置を反対に表示したい

トップページの中腹に表示されるブログ記事一覧とお知らせ記事一覧の左右を入れ替えることはできますか?また、スマホ表示の際の上下の表示順も入れ替えをしたいです。

A.下記のphpファイルの該当箇所を編集します

①PC表示の際の左右の表示入れ替え

編集するファイル:index.php
編集する箇所:

①NEWSの位置を左から右へ変更

  <?php
       $index_news_num = $options['index_news_num'];
       $args = array('post_type' => 'news', 'ignore_sticky_posts' => 1, 'posts_per_page' => $index_news_num);
       $index_news_list = get_posts($args);
       if ($index_news_list) {
  ?>
  <div class="left">

※最終行の”left”を”right”へ変更します。

②BLOGの位置を右から左へ変更

  <?php
       $index_blog_num = $options['index_blog_num'];
       $args = array('post_type' => 'post', 'ignore_sticky_posts' => 1, 'posts_per_page' => $index_blog_num);
       $index_blog_list = get_posts($args);
       if ($index_blog_list) {
  ?>
  <div class="right">

※最終行の”right”を”left”へ変更します。

②スマホ表示の際の上下の表示順入れ替え

1.下記ファイルの該当箇所をカット(Ctrl+X)します
編集するファイル:mobile/index.php
(ワードプレス管理画面からは直接参照できないファイルなのでFTP等を使用し、編集をする必要があります)
切り取る箇所:

       $index_blog_num = $options['index_blog_num'];
       $args = array('post_type' => 'post', 'ignore_sticky_posts' => 1, 'posts_per_page' => $index_blog_num);
       $index_blog_list = get_posts($args);
       if ($index_blog_list) {
  ?>
  <div id="index_blog">
   <h3 class="headline"><?php echo $options['index_blog_headline']; ?></h3>
   <ol>
    <?php
         foreach ($index_blog_list as $post) : setup_postdata ($post);
    ?>
    <li class="clearfix">
     <a class="image" href="<?php the_permalink() ?>"><?php the_post_thumbnail('size1'); ?></a>
     <?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.n.j'); ?></time></p><?php }; ?>
     <a class="title" href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    </li>
    <?php endforeach; wp_reset_query(); ?>
   </ol>
   <?php if($options['show_index_blog_button'] == 1) { ?>
   <div class="link_button_wrap">
    <div class="link_button"><?php next_posts_link($options['index_blog_button']) ?></div>
   </div>
   <?php }; ?>
  </div>
  <?php }; ?>

2.同ファイル上、下記コードの直上部にペースト(Ctrl+V)します

  <?php
       $index_news_num = $options['index_news_num'];
       $args = array('post_type' => 'news', 'ignore_sticky_posts' => 1, 'posts_per_page' => $index_news_num);
       $index_news_list = get_posts($args);
       if ($index_news_list) {
  ?>
(以下省略)

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事