WordPressテーマ「JIN」ユーザーのきたむ（wakajps）です。
WordPress有料テーマのJIN（WordPressテーマをJIN（ジン）に変更！デザインのテンプレートが豊富！）を購入して５カ月ほど経ちました。
本記事では、記事下のSNSシェアボタンとプロフィールの位置を入れ替える方法を紹介していきます。応用で関連コンテンツユニットも入れ替え可です。
【JINカスタマイズ】位置入れ替え後のイメージ
カスタマイズ前
カスタマイズ後
上のビフォー＆アフターのようにプロフィールとSNSシェアボタン順番を入れ替えることができます。
SNSシェアボタンは記事に近いほうが便利だな～、と思ったためです。
JINをカスタマイズするための準備【子テーマのダウンロード】
JINの子テーマをインストールします。JINの公式サイトから子テーマをダウンロードしてインストールします。
親テーマと同じようにWordPressにアップロードし、インストール→有効化すればOK！
その後、親テーマからsingle.phpをダウンロード。そのsingle.phpを子テーマ側にアップロードします。
作業をはじめるまえに、single.phpのバックアップをとっておくことをおすすめします。
JINのカスタマイズ用CSSコード【SNSシェアボタンとプロフィールの位置を入れ替える】
「テーマの編集」からJINの子テーマを選び、single.phpを開きます。
65行目付近で以下のコードを見つけてください。
<?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; ?>
この順番を入れ替えるだけでOKです。具体的な手順は以下の通り。
変更前は、下の順番に並んでいますので、
- プロフィール
- 関連コンテンツユニット
- SNSシェアボタン
これを以下のように変更します。
- SNSシェアボタン
- プロフィール
- 関連コンテンツユニット
この場合、コードは以下のようになります。
<?php if ( ! get_option( ‘sns_delete’ ) ) : ?>
<?php get_template_part(‘include/sns’); ?>
<?php endif; ?>
<?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>
以上です。
応用すれば、関連コンテンツユニットの位置も移動できますね。
そのほかの【JINカスタマイズ】
SNSシェアボタンのデザイン（サイズ）変更CSSを公開しています。詳しくは以下の記事をどうぞ！
以上、きたむ（wakajps）でした。
