Amazonブラックフライデー&サイバーマンデー!

【WordPress】WordPressテーマ「JIN」のカスタマイズまとめ

巷で評判のWordPressテーマ「JIN」を導入してみました。

少し価格は高いのですが、いままでの運用経験上、テーマを変えることが一番効果が現れたりするので、有料テーマがどのくらい凄いのか体験したいと思い導入してみました。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

WordPressテーマ「JIN」の導入方法

下記のURLからダウンロードできます。

またドキュメントも充実しているので、このサイトを見ればすべてが分かります。

https://jin-theme.com/

jin.zipをダウンロードしたら、外観>テーマ>新規追加からインポートして、有効化します。

子テーマをインストール

テーマがアップデートされた時に、自分のカスタマイズ設定が消えない用に子テーマも設定しておきます

https://www.adminweb.jp/wordpress-theme/jin/index3.html

※設定したあと子テーマをいれると、また設定やり直しになるので最初に設定しておくこと!

JINの見た目のカスタマイズ

まず見た目を自分好みの変更しましょう!

スタイル

デモ一覧から一番親しいデザインのスタイルをダウンロードしておきます。(jin-demo1.dat)

https://jin-theme.com/demo/

次にCustomizer Export/Importのプラグインを入れて、先のスタイルをインポート

https://jin-theme.com/manual/kisekae/

  • もし画像が表示されない場合
    プラグインが原因で表示されない問題が起きました。
    Jetpackの遅延読み込みにチェックが入っていると画像がすべて1×1.trans.gifになってしまいます。
    Jetpack>設定>画像を遅延読み込みをOFFにすることで解決しました。

外観>カスタマイズ

上から順に設定していきます。項目が多いのですが、ここですべての見た目が調整できます。

https://jin-theme.com/manual/

メニューについて

ピックアップとグローバルナビゲーション、スマホスライドメニューとそれぞれメニューを作成して設定すること!

右上のSNSアイコンを非表示

Twitter以外やってないので非表示にしました。

#headmenu .line {
display:none;/*LINEを非表示*/
}
#headmenu .instagram {
display:none;/*インスタグラムを非表示*/
}
#headmenu .youtube {
display:none;/*youtubeを非表示*/
}
#headmenu .facebook {
display:none;/*フェイスブックを非表示*/
}
#headmenu .twitter {
display:none;/*twitterを非表示*/
}

目次の設置

プラグイン「Rich Table of Contents」をインストールするだけです。
参考 目次プラグイン「Rich Table of Contents」の使い方【設定方法のまとめ】|ひつじアフィリエイトひつじアフィリエイト

JINのアナリティクスと広告の設定

アナリティクスや広告の設定をしていきます。

アナリティクスの設定

HTMLタグ設定>【head内】にコードを貼り付けておくこと!
※テーマをかえて数時間入れ忘れて、データが取れませんでした。。。

広告設定について

広告管理メニューからコードを貼り付けます。

https://jin-theme.com/manual/ad-setting/

とくにインフィード広告は記事を参考に設置することをおすすめします。

https://jin-theme.com/manual/jin-infeedad/

サイドバーに広告

外観>ウィジェット>カスタムHTMLにコードをいれるだけです。

記事中にも広告を追加

WordPressのテーマJINの指定された広告の場所以外で、追加で広告を設定する方法の紹介です。
広告効果は1番高いです。

Code Snippetsの導入

functions.phpにコードを挿入するのですが、ミスをするとWordPressがおかしくなるどころか、変更すらできなくなるのでこちらのプラグインをいれることで安全にコードの追加ができます。必須!

参考 取得できませんでしたネタワン

広告コードの挿入

先のプラグイン有効化するとWordPressの管理画面にSnippertsのメニューが表示されています。

Add Newを押して、タイトルを適当につけて(記事中広告とか)Code欄を下記のコードをコピペします。(入れたい広告コードも中にコピペ)

コピペが終わったら最後に変更を保存ボタンを押すだけです。

JINのその他のカスタマイズ

さらにJINを改造する方法です。

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

ブログ(テーマは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' ); ?>

と変更しました。

WordPressテーマ「JIN」のカスタマイズまとめ

JINはここ数年の中で1番人気のWordPressテーマです。
魅力は見た目の良さだと思います。

見た目の良さを生かしつつ、カスタマイズで更に最適化していきましょう!

以上、すいみん(@cg_method)でした!