WordPressの有料テーマ【JIN】を購入した後、子テーマを作ってカスタマイズした内容となります。
購入して大体2週間かかったと思います。
理由は、他の開発者が作ったテーマを1から読み解いて仕組みや設計を理解していく方が、自分で作るより時間かかるからです💧
1番時間かかったのはやはりAMP化です。
JINのカスタマイズ内容リスト
- AMP化
- ヘッダー画像の外部URL化
- アイキャッチの外部URL化
- トップのタブ部分を丸ごと増やして簡易リスト化
- トップのタブ部分を増やす
- コンテンツマガジンの最新記事以外の部分にも広告を挿入
- HTML5タグの修正
- サーチコンソールでのメタタグ重複回避
JINのテーマをAMP化する
JINを購入する前から、使用していたテーマでAMP化を行なっていたので、今回も必要に迫られてカスタマイズしました。
カスタマイズに必要だった部分は、なんと言ってもJINの御酸味である管理画面上でカラーを変更してデザインを変えられる部分をAMP化でどう持ってくるかでした。
JINのテーマデザインをそのままAMPページでも表示できるようにしたかったんです。
ただ、AMP化するにはCSSのサイズが物凄くシビアなので、コンテンツ部分の機能が多いJINのAMP化はかなり苦戦を強いられました。
現在1kbでも増えたら、Googleさんから怒られメールが届く状態です😅
恐らく、人気テーマの【SANGO】と【JIN】は、コンテンツ内機能がとても多い為、AMP化がかなり厳しいんじゃないかと思っています。
見出しタグやボックス、バルーンなども数種類数パターン用意されていて、ユーザーとしては好みのデザインを使用するメリットがありますが、
そのメリットがAMP化ではデメリットとなり、CSSを削ることができない状態です。
画像の外部URL化
コンテンツ内に入れるアイキャッチなどの画像はほぼ外部URLを使用している為、その辺のCSSの修正もコツが必要でした。
→なんて事はない…よくよく考えれば、PHPには便利な関数があって、楽チンでした💧
コンテンツ内の画像を外部URL化にしている理由は、サーバー容量と転送量の削減です。
別サイトの画像を外部化した事によって、8G近くあった画像を1G以下まで減らすことができました。
また、画像の表示も早くなり、転送量も大幅に減ったので大満足です。
近年ではサイトの表示スピードが重要視されています。
WordPressで画像を管理すると、データベースもサーバー容量も圧迫してくるので、既にアクセスがあるサイトでは持たないと判断しました。
サイトの記事数が多くなればなるほど、画像を外部URL化するのが大変になります。
サイトと画像を切り離す事によって、WordPressを身軽にさせるのも1つの方法です。
WordPressのテーマ開発時に、記事内の画像とアーカイブのサムネイル画像の画像サイズ設定を、如何に上手く使い分けるかも、重要になってきます。
適切な位置に適切な画像サイズを配置するのも重要ですが、サムネイル画像の生成が多すぎてもサーバー容量を圧迫させてしまいます。
ここでテーマ開発者の技術力が問われると言っても過言ではありません。
コンテンツマガジンのタブ機能を増やしたい
記事がある程度溜まると、サイトを見にきてくれるユーザーが欲しい情報のページまで辿りにくくなります。
トップからの導線をつけて、ユーザーが目的の記事まで辿りやすくする必要があるので、トップページの改修が必要になってきます。
Googleの検索結果から目的の記事にアクセスする人が殆どですが、サイトのリピーターが増えると記事をまとめてアクセスしやすいページが必要となります。
そこで今回は、コンテンツマガジン部分を増やして、簡易メニュー的なものを作りたいと思っていました。
コンテンツマガジン部分は、javascriptも使用しているので、ソースを眺めながら既存のソースを使用するとバッティングする可能性もあるので、どうしようかなと思っていました。
他に同じような機能のソースがないかググっていたら、JINのテーマでコンテンツマガジン部分のソースは、あるサイトのソースを利用して使用していたことが分かり、仕組みはここで把握しました。
コンテンツマガジン内にも広告を挿入したい
広告が挿入されるのが、最新記事のみだったので、他のタブをクリックする際にも表示させたいと思ったのが理由です。
見た目はマガジンタイプが好みなのですが、広告との相性で見るとベーシックタイプがオススメです。
インフィード広告をマガジンタイプに挿入する場合は、設定した内容がそのまま表示される広告なら良いのですが、画像広告のみだと表示が崩れてしまい、違和感が出てしまうので…。
ベーシックタイプだと画像のみでも、そんなに違和感を感じません。
インフィード広告は記事に馴染ませるのが1番効果が高いのもあって、ベーシックタイプを選択しました。
まとめ
WordPressの有料テーマ【JIN】をかなりカスタマイズしました。
本来ならテーマ開発する時間を削減するために有料テーマ買ったのに、ゴリゴリカスタマイズしちゃって、なんだか…意味ないやん的な💧
でもしょうがない…やっぱりそこはテーマ開発者の性なんだよ…。
カスタマイズが大好きなんだよ…。
そして、コンテンツの改善まで手が回らない状況がまだまだ続く→ダメやん！
今回記載したカスタマイズ方法はボチボチサイトに公開していこうと思います。
コメント