Wordpress

JINのアップデート(Ver2.30へ)実装した件【WordPressテーマ】

ライター「みさ」

こんにちは。ライター「みさ」です。

WordPressの有料テーマ「JIN」を使っているみなさん、2020年1月4日にJINがアップデート(Ver2.30へ)されましたね。

そこで、2019年12月15日からJINを使っている私が、今回JINのアップデートを実装した件をここに記事としてまとめることにしました。

※JINのアップデート内容や方法の詳細は、上記のツイートへ【Wordpressテーマ「JIN」のアップデート情報】へ飛べるようになっています。

まずは、今回「JIN」のアップデートを実装した私なりの要約(結論)です。

要約(結論):「JIN」のアップデート(Ver2.30へ)
引用元:https://jin-theme.com/ JINテーマ公式より

  • WordPressテーマ「JIN」を更新しました。
  • 親テーマではなく、子テーマへ変更して良かった。
  • Classicエディタ→Gutenberg(ブロックエディタ)へ変更した使い心地は、良いと思う。
  • 吹き出しのGutenberg(ブロックエディタ)対応を実装して良かった。
  • JINアイコンフォント[独自]を実装して良かった。
  • Gutenbergの「ブログカード」「余白」「区切り線」を実装してみました。「ブログカード」機能は必須であると実感しました。
  • まとめ

それでは、上記それぞれについて詳細を解説していきます。

ぜひ参考までにご覧いただければ幸いです。

WordPressテーマ「JIN」を更新する

ライター「みさ」

まずは、Wordpressテーマにおいて以下のように「今すぐ更新」という表示があるときは、更新します。

※ただし、更新する前にバックアップを取っておくようにしましょう。

WordPressテーマを更新する方法

今回は、私が使用しているテーマがJINなので、JINの更新をしました。

※注意:) 使用しているテーマによって、更新を必要とする頻度やタイミングは異なりますので、気づいたときにその都度「更新」するようにしましょう。

それでは次に、子テーマへ変更(子テーマを有効化)を解説していきます。

子テーマへ変更(子テーマを有効化)

ライター「みさ」

2019年12月にJINをダウンロードしたときは、親テーマだけでした。

しかし、2020年1月の今回のJINアップデートにより、子テーマをダウンロード→有効化しました

※念のため、子テーマを有効化済み。

WordPressでは、親テーマが…子テーマが…とよく言われていますよね。

まず結論として、Wordpressテーマでは、親テーマではなく「子テーマ」を有効化しておくべきです。

私は以前に(JINの前に)ストークという有料テーマを使っていたのですが、そのときに「子テーマ」を有効化していました。

そのストークを使用していたときのことを思い出し、今回はJINのほうも「子テーマ」をダウンロード→有効化しました。

WordPressテーマ「JIN」 子テーマを有効化

なぜ、子テーマを有効化したのか⁈と言うと…

子テーマを有効化しておくことによって、アップデート時やテーマをイジるときなどにさまざまな再設定をしなくて済むメリットがあるからです。

私個人的には、テーマをイジるようなことはしませんが、HTMLやCSSを追加したいなど思っている方は、子テーマのほうを有効化しておくべきです。

それでは次に、Classicエディタ→Gutenberg(ブロックエディタ)へ変更を解説していきます。

Classicエディタ→Gutenberg(ブロックエディタ)へ変更

ライター「みさ」

私は、2019年12月まではClassicエディタを使っていました。

しかし、今回のJINアップデートにより、Gutenberg(ブロックエディタ)へ対応とのことなので、2020年1月からは、Gutenberg(ブロックエディタ)を使用することにしました。

WordPress エディタの選択

以上、エディタの選択は完了です。

Classicエディタ→Gutenberg(ブロックエディタ)へ変更した感想としては、私個人的には「パソコン執筆する場合、Gutenberg(ブロックエディタ)のほうが圧倒的に書きやすい」「スマートフォンで執筆する場合、Gutenberg(ブロックエディタ)のほうが使い辛い」です。

それでは次に、吹き出しがGutenberg(ブロックエディタ)対応になったので実装してみましょう。

吹き出しがGutenberg(ブロックエディタ)対応

ライター「みさ」

JINが今回のアップデートで吹き出しのGutenberg(ブロックエディタ)対応ということで、さっそく実装してみました。

※まさに、この吹き出しのことです。

WordPressテーマ「JIN」 吹き出しのGutenberg(ブロックエディタ)対応

実装した感想としては、あまりにも簡単にできたという感じです。

それでは次に、JINアイコンフォントの設定を実装していきましょう。

JINアイコンフォントが94種類も追加

JINには【独自アイコンフォント】があり、今回のアップデートでは94種類も新規追加されたとのことです。

「fontawesomeを読みこまない」をON

ライター「みさ」

まずは、「fontawesomeを読みこまない」という設定だけをします。

※この作業により、表示速度がアップします。

サイトの「カスタマイズ」→その他設定→「fontawesomeを読みこまない」にチェックを入れる(ONにする)→公開をクリックします(完了です)。

「fontawesomeを読みこまない」にチェックを入れる→公開

そして次に、実際にアイコンフォントを記事内で実装していきましょう。

アイコンフォントを記事内で実装

ライター「みさ」

それでは実際に、アイコンフォントを記事内で実装してみましょう。

今回は、例として以下のように実装してみました。

WordPressテーマ「JIN」アイコンフォントを記事内で実装

[jin_icon_●●●● size=”▲▲px” color=”#■■■■■■”]

↑アイコンフォントの種類,サイズ,カラー(色)を変更したい場合は、上記をイジる(●,▲,■にそれぞれお好みで設定する)だけでOKです。

※カラー(色)は、HTMLカラーコードを使います。

HTML color codes

それでは次に、スマホフッターメニューにアイコンフォントを設定していきましょう。

グローバル,スマホ固定フッターメニューにアイコンフォントを設定

ライター「みさ」

それでは、グローバル,スマホ固定フッターメニューにアイコンフォントを設定していきましょう。

WordPressテーマ「JIN」  アイコンフォント

グローバルとスマートフォン(ヘッダー部分)、それぞれにアイコンフォント設定をしても良いとは思いますが、私個人的にはそれぞれに設定するのがめんどくさいので、パソコンから見てもスマートフォンから見てもヘッダー部分は同じようにしています。

しかし、スマートフォンのフッター部分は固定なので、(別でメニューを新規作成して)限界の4個を決めて表示しています。

それでは次に、Gutenbergの「ブログカード」「余白」「区切り線」を実装してみましょう。

Gutenbergの「ブログカード」「余白」「区切り線」を実装

ライター「みさ」

それでは、Gutenbergの「ブログカード」「余白」「区切り線」を実装してみましょう。

※JINの機能として知っておいたほうが便利そうです。

Gutenbergの「ブログカード」「余白」「区切り線」

さぁ、それぞれを実装してみましょう。

Gutenbergの「ブログカード」を実装

Gutenbergの「ブログカード」を実装は、読者さんに(その記事と)あわせて読んでもらいたい「URL」を入力するだけでOKです。

Gutenbergの「ブログカード」を実装

以上、完了です。

Gutenbergの「余白」を実装

Gutenbergの「余白」を実装は、まさに「余白」を設けたいときだけ使用します。

もしかしたら、「余白」機能を使用する頻度は低いかもしれませんが、知っておくに越したことはないですね。

Gutenbergの「余白」を実装

以上、完了です。

Gutenbergの「区切り線」を実装

Gutenbergの「区切り線」を実装は、まさに「区切りを付けたい」ときだけ使用します。

  • 区切り線のスタイル
  • 区切り線の太さ
  • 区切り線の

上記3点を選択して設定します。

Gutenbergの「区切り線」を実装

以上、完了です。

それでは、さいごにまとめます。

まとめ

ライター「みさ」

それでは、さいごにまとめ(再結論)です。

まとめ(再結論):「JIN」のアップデート(Ver2.30へ)
引用元:https://jin-theme.com/ JINテーマ公式より

  • WordPressテーマ「JIN」を更新済み
  • 親テーマではなく、子テーマへ変更済み
  • Gutenberg(ブロックエディタ)は、パソコンでは執筆しやすいと感じた。スマホでは微妙に使いづらいと感じた。
  • 吹き出しのGutenberg(ブロックエディタ)対応を実装→とても良い
  • JINアイコンフォント[独自]を実装→とても良い
  • Gutenbergの「ブログカード」は必須。「余白」「区切り線」は、実際の使用頻度は低めになりそう。
  • まとめ(再結論)

簡潔に言うと、JINのGutenberg(ブロックエディタ)は、パソコンでの執筆には、本当に使いやすくなったと感じています。

あとは、いろいろとポチポチ押してみて試していく、という感じですね。

※補足:) 【http → https への変更】について

既存そのままのJINでは、何もしなくて大丈夫です。

しかし、もし自分で加えたコードや画像などがあれば、それらは自分でhttp→httpsへ変更が必要です。

以上、今回はここまで。

今回の記事が、少しでもみなさんの役に立てば嬉しいです。

さいごまでご覧いただき、ありがとうございました。

WordPressのテーマ変更を実装した件,ストークからJINへ! こんにちは。ライター「みさ」です。 みなさん、Wordpressのテーマについて悩んでいませんか。 「どのテーマを使えば良...
ABOUT ME
misa
当サイト運営者・ライターをしています。