サポート » テーマ » 前の記事・次の記事のデザインを変更したい

  • 解決済 Jinnsei Minami

    (@jinnsei-minami)


    あるサイトを参考に下記のようなコードをpost.phpに記入して
    前の記事と次の記事へのリンクを表示させています。
    *参考サイト : https://www.imamura.biz/blog/12351

    <strong></strong><!--▼ページ送り▼-->
    <?php
    $prevpost = get_adjacent_post(true, '', true); //前の記事
    $nextpost = get_adjacent_post(true, '', false); //次の記事
    if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
    ?>
    <div class="cat_paging">
    <?php
     if ( $prevpost ) { //前の記事が存在しているとき
      echo '<dl class="alignleft"><dt>Previous</dt><dd><a href="' . get_permalink($prevpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($prevpost->ID, 'thumbnail') . '</span><span class="title">' . get_the_title($prevpost->ID) . '</span></a></dd></dl>';
     } else { //前の記事が存在しないとき
      echo '<div class="alignleft nopost"><a href="' . network_site_url('/') . '">TOPへ戻る</a></div>';
     }
     if ( $nextpost ) { //次の記事が存在しているとき
      echo '<dl class="alignright"><dt>Next</dt><dd><a href="' . get_permalink($nextpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($nextpost->ID, 'thumbnail') . '</span><span class="title">' . get_the_title($nextpost->ID) . '</span></a></dd></dl>';
     } else { //次の記事が存在しないとき
      echo '<div class="alignright nopost"><a href="' . network_site_url('/') . '">TOP</a></div>';
     }
    ?>
    </div>
    <?php } ?>
    <!--▲ページ送り▲-->

    するとこう表示されます。
    画像 : http://cleopatra.girlfriend.jp/wp-content/uploads/2016/03/Previous-Next.png

    表示のされ方を次のように変更するためのコードをどなたか作成していただけないでしょうか。
    1 表示されるサムネイル画像を4:3の長方形にしたい。
    2 「Previous」と「Next」をサムネイル画像の上の中央に配置したい。
    3 記事題名をサムネイル画像の下の中央に配置したい。

    質問というよりお願いになってしまいますがよろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • モデレーター Okamoto Hidetaka

    (@hideokamoto)

    おおよそCSSで対応できるのではないかと思うのですが、そちらは試されましたか?

    トピック投稿者 Jinnsei Minami

    (@jinnsei-minami)

    すいません。基本的なことが分からないので教えていただきたいのですが
    参考サイト : http://techacademy.jp/magazine/4872
    というサイトを参考に試して見る場合、
    <style> </style>を上記<!–▼ページ送り▼–>コードのどこに入れればいいのでしょうか?

    それとも考え方として作成したコードをテーマのCSSに追記するという方法になるのでしょうか?

    「Previous」と「Next」には、それぞれクラスがついてますよね。それに img 用のクラスを追加してもいいとは思いますが、画像は取得できているのですから、スタイルシートでサイズを決めるだけでよいでしょう。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    テーマのCSSに書くのが手っ取り早いですね。
    JetPackを使っていればそちらからもCSSを追加できます。
    Custom CSS — Jetpack for WordPress : https://jetpack.com/support/custom-css/

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「前の記事・次の記事のデザインを変更したい」には新たに返信することはできません。