巷で評判のWordPressテーマ「JIN」を導入してみました。
少し価格は高いのですが、いままでの運用経験上、テーマを変えることが一番効果が現れたりするので、有料テーマがどのくらい凄いのか体験したいと思い導入してみました。
WordPressテーマ「JIN」の導入方法
下記のURLからダウンロードできます。
またドキュメントも充実しているので、このサイトを見ればすべてが分かります。
jin.zipをダウンロードしたら、外観＞テーマ＞新規追加からインポートして、有効化します。
子テーマをインストール
テーマがアップデートされた時に、自分のカスタマイズ設定が消えない用に子テーマも設定しておきます
※設定したあと子テーマをいれると、また設定やり直しになるので最初に設定しておくこと！
JINの見た目のカスタマイズ
まず見た目を自分好みの変更しましょう！
スタイル
デモ一覧から一番親しいデザインのスタイルをダウンロードしておきます。（jin-demo1.dat）
次にCustomizer Export/Importのプラグインを入れて、先のスタイルをインポート
- もし画像が表示されない場合
プラグインが原因で表示されない問題が起きました。
Jetpackの遅延読み込みにチェックが入っていると画像がすべて1×1.trans.gifになってしまいます。
Jetpack＞設定＞画像を遅延読み込みをOFFにすることで解決しました。
外観＞カスタマイズ
上から順に設定していきます。項目が多いのですが、ここですべての見た目が調整できます。
メニューについて
ピックアップとグローバルナビゲーション、スマホスライドメニューとそれぞれメニューを作成して設定すること！
右上の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」をインストールするだけです。
JINのアナリティクスと広告の設定
アナリティクスや広告の設定をしていきます。
アナリティクスの設定
HTMLタグ設定＞【head内】にコードを貼り付けておくこと！
※テーマをかえて数時間入れ忘れて、データが取れませんでした。。。
広告設定について
広告管理メニューからコードを貼り付けます。
とくにインフィード広告は記事を参考に設置することをおすすめします。
サイドバーに広告
外観＞ウィジェット＞カスタムHTMLにコードをいれるだけです。
記事中にも広告を追加
WordPressのテーマJINの指定された広告の場所以外で、追加で広告を設定する方法の紹介です。
広告効果は1番高いです。
Code Snippetsの導入
functions.phpにコードを挿入するのですが、ミスをするとWordPressがおかしくなるどころか、変更すらできなくなるのでこちらのプラグインをいれることで安全にコードの追加ができます。必須！
広告コードの挿入
先のプラグイン有効化すると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のブログカード（外部リンク）の見た目をよくするカスタマイズ
｢Pz-LinkCard｣のプラグインをインストール
プラグイン＞新規追加＞Pz-LinkCardでインストールしていきます。
｢Pz-LinkCard｣の表示調整
設定＞Pz カード設定＞表示から
- サイト情報：上⇒なし
- 内部リンクの場合に投稿日を表示する；チェックあり⇒なし
- リンク先URLの表示 ：タイルの下⇒なし
- サムネイル
- 幅：100⇒148px
- 高さ：108⇒148px
- シェア数を表示する：ツイッター フェイスブック（シェア数） はてなブックマーク Pocketのチェックを外す
- 下の余白を40pに
CSSの追加
最後にCSSを追加すれば見た目が整います｡
あとは下記の様なショートコードを入れれば外部リンクブログカードが生成されます｡[blogcard url="https://blog-methods.com/"]
フッターにリンクを追加するカスタマイズ
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
CSSの追加
最後に見た目を整える下記のCSSを入れるだけです｡
footer .footer-inner #privacy a, footer .footer-inner a {
padding: 0 15px;
border-right: 1px solid #ddd ;
}JINの記事タイトル上にパンくずを追加するカスタマイズ
JINの記事タイトル上にパンくずがなかったので追加しました｡
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/
functions.phpの追加
functions.phpに下記のコードを追加します｡
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でスライダー表示する方法
すいみんヘッダー画像を複数枚使用して訴求できます。
