MENU
デザイン依頼
  1. ホーム
  2. WordPress
  3. JINカスタマイズ
  4. WordPressテーマJINのカスタマイズまとめ

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

JINカスタマイズ
2018年7月18日
wordpress-jin-customize

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

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

目次

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

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

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

JIN（ジン）
JIN（ジン）｜真の使いやすさを追求したWordPressテーマ WordPressテーマ「JIN」の販売ページです。ひつじと赤石カズヤの2人により「本当につかいやすい」と感じてもらえるテンプレートを追求し、作り上げました。

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

子テーマをインストール

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

Let'sプログラミング
JINの子テーマをインストールする インストールしたテーマ(今回の場合はJIN)に対してコードを書き換えるなどのカスタマイズを行う場合、直接JINのファイルを書き換えるのではなく子テーマをインストールして…

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

⇧ 目次へ戻る

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

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

スタイル

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

JIN（ジン）
JINのデモ一覧｜JIN（ジン） JINはいろいろなバリエーションが効くテーマです。 カスタマイズ次第では同じテーマだとは思えないほど見た目がガラリと変わ

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

JIN MANUAL
JINのデザインを着せ替え（デザインインポート）する方法｜JIN MANUAL JINはいろいろなデザインに着せ替えることができるWordPressテーマです。 開発者側で見本となるデザインを用意して
  • もし画像が表示されない場合
    プラグインが原因で表示されない問題が起きました。
    Jetpackの遅延読み込みにチェックが入っていると画像がすべて1×1.trans.gifになってしまいます。
    Jetpack＞設定＞画像を遅延読み込みをOFFにすることで解決しました。

外観＞カスタマイズ

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

JIN MANUAL
JIN MANUAL｜WordPressテーマ「JIN」の設定マニュアル WordPressテーマ「JIN」の設定と使い方について、図解を含めてわかりやすく解説をしています。

メニューについて

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

右上の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における目次の作り方を解説しています！ JINでは「Rich Table of Contents」のプラグ
⇧ 目次へ戻る

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

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

アナリティクスの設定

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

広告設定について

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

JIN MANUAL
広告管理の使い方｜JIN MANUAL 広告管理の使い方 JINでは「広告管理」という機能を使って、広告を管理画面から一元管理することができます。 その方法につ

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

JIN MANUAL
インフィード広告を設定する｜JIN MANUAL JINでは簡単にGoogleAdSenseのインフィード広告の設定ができます。このページでは設定の仕方について解説します

サイドバーに広告

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

記事中にも広告を追加

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

Code Snippetsの導入

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

ねたわん
Code Snippets: functions.phpのコードを管理できるWordPressプラグイン ｜ ねたわん Code Snippetsは、WordPressテーマの関数を定義する「functions.php」のPHPコードを管理できるプラグインです。 通常の場合は「functions.php」にPHPコードを直接記述しま…

広告コードの挿入

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

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

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

⇧ 目次へ戻る

JINの上に戻るボタンを整える

JINの上に戻るボタンはちょっと中心からずれているのが気になります｡

サイズを大きくしつつ整えてみました｡やり方は下記のCSSを追加するだけです｡

/*トップに戻る*/
#page-top .jin-ifont-arrow-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-left: 2px;
}

#page-top a {
  background-color: #fff780;
  color: #4d0000;
  position: relative;
  bottom: 50px;
  border: solid 2px #4d0000;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
}
⇧ 目次へ戻る

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' ); ?>

と変更しました。

⇧ 目次へ戻る

JINのブログカード（内部リンク）の見た目をよくするカスタマイズ

下記のCSSを挿入します｡

⇧ 目次へ戻る

JINのブログカード（外部リンク）の見た目をよくするカスタマイズ

STEP

｢Pz-LinkCard｣のプラグインをインストール

プラグイン＞新規追加＞Pz-LinkCardでインストールしていきます。

STEP

｢Pz-LinkCard｣の表示調整

設定＞Pz カード設定＞表示から

  • サイト情報：上⇒なし
  • 内部リンクの場合に投稿日を表示する；チェックあり⇒なし
  • リンク先URLの表示 ：タイルの下⇒なし
  • サムネイル
  • 幅：100⇒148px
  • 高さ：108⇒148px
  • シェア数を表示する：ツイッター フェイスブック（シェア数） はてなブックマーク Pocketのチェックを外す
  • 下の余白を40pに
STEP

CSSの追加

最後にCSSを追加すれば見た目が整います｡

あとは下記の様なショートコードを入れれば外部リンクブログカードが生成されます｡[blogcard url="https://blog-methods.com/"]

⇧ 目次へ戻る

フッターにリンクを追加するカスタマイズ

STEP

footer.phpにコードを挿入

適当なメモ帳に下記のコードを挿入

<span id="link1"><a href="https://blog-methods.com/">CGメソッド</a></span>

みたいな感じでリンクを作ります｡

最後にfooter.phpという名前で保存します｡（文字化けする場合はUTF-8で保存しましょう）

最後にこのデータをJINの子テーマにアップロードします｡

/jin/wp-content/themes/jin-child/footer.php

STEP

CSSの追加

最後に見た目を整える下記のCSSを入れるだけです｡

footer .footer-inner #privacy  a, footer .footer-inner a {
   padding: 0 15px;
   border-right: 1px solid #ddd ;
}
⇧ 目次へ戻る

JINの記事タイトル上にパンくずを追加するカスタマイズ

JINの記事タイトル上にパンくずがなかったので追加しました｡

STEP

single.phpにコードを追加

/public_html/blog-methods.com/jin/wp-content/themes/jin/からsingle.phpからダウンロード

16行目に<?php breadcrumbs(); //パンくずリスト?>のコードを追加します｡

保存して子テーマにアップロードします｡

/public_html/blog-methods.com/jin/wp-content/themes/jin-child/

STEP

functions.phpの追加

functions.phpに下記のコードを追加します｡

STEP

CSSの追加

最後に見た目を整えるコードを追加してあげます｡

#breadcrumbs  {
   margin-bottom: 10px;
} #breadcrumbs  ul {
	width: 100%;
	font-size: 1.0rem;
} #breadcrumbs  ul li {
	display: inline-block;
	vertical-align: top;
	padding: 0px 4px 0px 4px;
}
⇧ 目次へ戻る

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

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

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

JINでスライダー表示する方法

すいみん

ヘッダー画像を複数枚使用して訴求できます。

⇨ 【JIN】トップページのヘッダー画像をスライダー表示する方法

あわせて読みたい
【JIN】トップページのヘッダー画像をスライダー表示する方法 トップページのヘッダー画像はサイトの見た目の花形ですよね？ しかしWordpressテーマ｢JIN｣にはスライダー表示ができません！ そこでテーマの一部をカスタマイズしてス…
⇧ 目次へ戻る
JINカスタマイズ
JIN
  • URLをコピーしました！

JIN関連まとめ

すいみん

JINに関する記事をまとめました。

⇨ JIN関連まとめ

あわせて読みたい
　　JIN関連 JINに関する記事をまとめています。

この記事を書いた人

すいみんのアバター すいみん フリーランスデザイナー

技術的なことが好きなデザイナー。
ブログが好きで月間20万PVの技術ブログを運営。
デザインからカスタマイズ、高速化、SEO対策など色々できます。
ご依頼はこちらから！

この著者の記事一覧へ

関連記事

この記事も読まれてます

目次
閉じる