WordPress

【WordPress】記事要素の表示順を変更する方法

wordpress-order-article-elements

ブログ(テーマはJIN)のCTA(コールトゥアクション)の位置やプロフィールの位置を変更したくなったので挑戦してみました。その備忘録

※PHPいじるので作業は慎重に(&バックアップ!)

FTPアカウント設定の取得

まずFTPにアクセスできるようにします。

Xサーバーなら、WordPress設定>FTPアカウント設定から情報や設定方法のやり方を取得できます。

FTPソフトからの接続

ホストの設定をします。アドレス、ユーザー名、パスワードの入力をして接続。

※FTPソフトによる細かい設定方法は種類がたくさんあるので割愛します。※ググることを推奨。

single.phpをダウンロード

接続後、/wp-content/themes/jinにアクセスして、single.phpをローカルへダウンロードします。(バックアップ)

single.phpをアップロード

※子テーマを設定している前提です。子テーマを作らず親テーマで編集することはおすすめしません!

/wp-content/themes/jin-childにアクセスしてさきほどのsingle.phpをアップロードします。

コードの変更

外観>テーマの編集からさきほどアップロードしてsingle.phpが表示されているはずなので選択します。

  • タグ
  • プロフィール
  • 広告
  • 関連記事
  • SNSシェア
  • CTA

の順番から

  • CTA
  • 広告
  • 関連記事
  • SNSシェア
  • タグ
  • プロフィール

に変更(入れ替えただけです)

実際のコード

65行目あたりへスクロール

<?php
  $arr = get_the_tags();
  if($arr){
    echo '<div class="tag-box">';
    foreach ( (array)$arr as $tag ) {
      echo '<span><a href="/tag/'.$tag->slug.'"><span class="tagicon"><i class="fa fa-tag" aria-hidden="true"></i></span> '.$tag->name.'</a></span>';
    }
    echo '</div>';
  }
?>

<?php get_template_part( 'include/custom-profile' ); ?>

<?php get_template_part('ad'); ?>

<div class="related-ad-unit-area"><?php echo get_option('ad_related_unit'); ?></div>

<?php if ( ! get_option( 'sns_delete' ) ) : ?>
    <?php get_template_part('include/sns'); ?>
<?php endif; ?>

<?php get_template_part('cta'); ?>

<?php get_template_part('cta'); ?>

<?php get_template_part('ad'); ?>

<div class="related-ad-unit-area"><?php echo get_option('ad_related_unit'); ?></div>

<?php if ( ! get_option( 'sns_delete' ) ) : ?>
  <?php get_template_part('include/sns'); ?>
<?php endif; ?>                                 

<?php
  $arr = get_the_tags();
  if($arr){
    echo '<div class="tag-box">';
    foreach ( (array)$arr as $tag ) {
      echo '<span><a href="/tag/'.$tag->slug.'"><span class="tagicon"><i class="fa fa-tag" aria-hidden="true"></i></span> '.$tag->name.'</a></span>';
    }
    echo '</div>';
  }
?>  

<?php get_template_part( 'include/custom-profile' ); ?>

と変更しました。

まとめ

あまり元テーマからのPHPを調整してのカスタマイズはしたくなかったのですが、

記事要素のの順番を変更は結構やってみたくなるものなので、メモしておきました。

まとめ記事の紹介
ABOUT ME
すいみん
東京在住。デザイナー寄りのテクニカルデザイナー。 ブログは技術検証の備忘録として書いています。