【JINカスタマイズ】プロフィールとSNSシェアボタンの位置を入れ替える

【JINカスタマイズ】プロフィールとSNSシェアボタンの位置を入れ替える

WordPressテーマ「JIN」ユーザーのきたむ(wakajps)です。

WordPress有料テーマのJIN(WordPressテーマをJIN(ジン)に変更!デザインのテンプレートが豊富!)を購入して5カ月ほど経ちました。

きたむ
きたむ
相変わらずめっちゃ書きやすい!

本記事では、記事下の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です。具体的な手順は以下の通り。

変更前は、下の順番に並んでいますので、

  1. プロフィール
  2. 関連コンテンツユニット
  3. SNSシェアボタン

これを以下のように変更します。

  1. SNSシェアボタン
  2. プロフィール
  3. 関連コンテンツユニット

この場合、コードは以下のようになります。

<?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を公開しています。詳しくは以下の記事をどうぞ!

【JINカスタマイズ】SNSシェアボタンのデザイン(サイズ)変更CSSを公開きたむ(wakajps)です。 WordPress有料テーマのJIN(WordPressテーマをJIN(ジン)に変更!デザインのテ...

 

以上、きたむ(wakajps)でした。

ABOUT ME
きたむ
アフリカではたらくフリースタイルジャパニーズ |三度の飯と写真|87年生の伊豆下田育ち→大学職員人事→ 南ア現地NGOでICT・マイクロファイナンスを軸に活動中|キリマンジャロ登頂|スマホ歴12年|旅行14カ国|仕事7カ国|<プロフィール詳細>

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

error: Content is protected !!