WordPress

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

wordpress-jin-settings

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

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

WordPressテーマ「JIN」

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

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

https://jin-theme.com/

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

子テーマをインストール

テーマがアップデートされた時に設定が消えない用に子テーマも設定しておきます

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

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

見た目のカスタマイズ

スタイル

まず、デモ一覧から一番親しいデザインのスタイルをダウンロードしておきます。(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を非表示*/
}

目次の設置

プラグインTable of Contents Plusをインストールするだけです。

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

アナリティクス

HTMLタグ設定>【head内】にコードを貼り付けておくこと!

※テーマをかえて数時間入れ忘れて、データが取れませんでした。。。

広告について

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

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

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

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

目次上にリンクユニット広告

流行っているので試してみました。

下記の記事を参考に設置しました。

https://laboradian.com/code-to-display-widget-before-toc/

外観>functions.phpの一番下にコードを挿入

※正確には?>の上にコードを挿入すること

※たまに「ファイルを更新」が失敗するので注意

あとは外観>ウィジェットから目次上にカスタムHTMLを追加して、広告コードをいれるだけ

サイドバーに広告

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

記事中にもっと広告を追加

外観>functions.phpの740行目あたりに下記のコードを挿入

※一番下にコードを入れるとサイトの最上部に広告ででてしまう

2番目と3番目のH2見出し手前に広告を追加

ABOUT ME
すいみん
名前:すいみん 東京在住のデザイナー DTP・映像・3D・プログラミングまで、 なんでも自分で試して作ることが好きです。 ブログはその備忘録です。