海老名・厚木・大和のホームページ制作 | パソコンサポート本舗

海老名・厚木・大和の集客に強いホームページ制作会社です。Jimdo・WordPressの構築、SEO対策、ブログ構築お任せください!

 046-204-7976

営業時間:平日9:00~17:00
セミナーなどで外出している場合があります。
大変恐れ入りますが、電話がつながらない時は留守番電話で
メッセージを残すかお問い合わせからご連絡ください。

XeoryBaseで「前の記事へ」「次の記事へ」を追加したい!

      2017/10/26

 

とあるブログを拝見していて
表題の件について悩んでいらっしゃる方がいたので解説しますよ〜
無事に解決すればいいな。

では、いきなり手順に入ります。

  1. 外観>テーマの編集>個別投稿 (single.php) を開きます。

 

2. 個別投稿 (single.php) を下へスクロールして以下の記述を見つけてください。

<footer class="post-footer">

 

3. 見つけたら、その直前に以下を追記ください。(コピペでOK! 行数はコピペしないでね)

2017/10/26追記:「次の記事へ」がずれるという報告がありましたので、ちょこっとだけ変更しました。

<div style="width:90%;margin:0 auto;">
 <?php if (get_previous_post()): ?>
 
<div style="width:40%;float:left;">
  <?php previous_post_link('%link', '<<前の記事へ'); ?>
 </div>

 <?php endif; if (get_next_post()): ?>
 
<div style="width:40%;float:right;text-align:right;">
  <?php next_post_link('%link', '次の記事へ>>'); ?>
 </div>

 <?php endif; ?>
</div>

 

全部書くと

(省略)
<?php endif; ?>
<?php the_content(); ?>


<div style="width:90%;margin:0 auto;">
 <?php if (get_previous_post()): ?>
 
<div style="width:40%;float:left;">
  <?php previous_post_link('%link', '<<前の記事へ'); ?>
 </div>

 <?php endif; if (get_next_post()): ?>
 
<div style="width:40%;float:right;text-align:right;">
  <?php next_post_link('%link', '次の記事へ>>'); ?>
 </div>

 <?php endif; ?>
</div>


<footer class="post-footer">
(省略)

となります。

ほんとは

 <?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>

だけ追記すれば十分なのですが、色々加えているのは、見栄え(CSS)のためです。

 

4. 追記できたら「ファイルを更新」します。

 

5. 表示はこんな感じ!

 

以上です〜

 

 - ブログ, 技術メモ