MENU
WordPressの使い方/カスタマイズ/Tips/コラム的な事を徒然と。
WPtips-WordPressのカスタマイズTips集-
  • プライバシーポリシー
  • About
WPtips-WordPressのカスタマイズTips集-

WordPressの有料テーマ【JIN】でカスタマイズした内容

2018 7/25
【JINテーマ】カスタマイズ
2018.07.24 2018.07.25

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】をかなりカスタマイズしました。

本来ならテーマ開発する時間を削減するために有料テーマ買ったのに、ゴリゴリカスタマイズしちゃって、なんだか…意味ないやん的な💧

でもしょうがない…やっぱりそこはテーマ開発者の性なんだよ…。

カスタマイズが大好きなんだよ…。

そして、コンテンツの改善まで手が回らない状況がまだまだ続く→ダメやん!

今回記載したカスタマイズ方法はボチボチサイトに公開していこうと思います。

WordPressユーザーのためのPHP入門 はじめから、ていねいに。第2版

WordPressユーザーのためのPHP入門 はじめから、ていねいに。第2版

水野 史土
5,850円(02/26 21:14時点)
発売日: 2017/03/28

Amazon楽天ブックス

Amazonの情報を掲載しています

カスタマイズの関連記事

  • カテゴリーとタグのトップページをGutenbergで作り込む方法
  • WordPressの有料テーマ【JIN】でカスタマイズした内容
  • WordPressテーマ「JIN」コンテンツマガジンに広告入れるカスタマイズ

今売れているプログラミングの本

  • 1位Python 1年生 体験してわかる...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 2位Python2年生 データ分析のし...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 3位Python2年生 スクレイピング...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位スッキリわかるJava入門(実...
    中山清喬 インプレスBKSCPN_【bookーfestivalーthr】 スッキリ ワカル ジャバ ニュウモン ナカヤマ,キヨ...
  • 5位現場で使える!pandasデータ...
    機械学習エンジニア&データサイエンティスト必携! 初学者でもpandasによる前処理手法がわかる 【本書...

今売れているデザイン本

  • 1位1冊ですべて身につくHTML & C...
    Mana SBクリエイティブイッサツデスベテミニツクエイチティーエムエルアンドシーエスエストウェブデザイ...
  • 2位沈黙のWebライティング ーWeb...
    ※本書は固定レイアウト型の電子版です 【SEOのためのライティング教本の決定版! 「成果が上がる」文章...
  • 3位UIデザインの教科書[新版] ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位大人女子デザイン 女性の心を...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 5位Adobe XDではじめるWebデザイ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
【JINテーマ】カスタマイズ
カスタマイズ
  • WordPressテーマ開発者が有料テーマを販売するにあたり注意すべきこと
  • WordPressテーマ「JIN」コンテンツマガジンに広告入れるカスタマイズ

この記事を書いた人

奏音桃のアバター 奏音桃

WordPress1X歴のテーマ開発者がWordPressの有料テーマを購入したのがキッカケで、WordPressのカスタマイズTipsを纏めています。

関連記事

  • WordPressテーマ「JIN」コンテンツマガジンに広告入れるカスタマイズ
    WordPressテーマ「JIN」コンテンツマガジンに広告入れるカスタマイズ
    2018.07.27
  • WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    2019.04.24
  • Simple GA RankingでWordPress有料テーマ【JIN】に対応したウィジェット作りました!
    Simple GA RankingでWordPress有料テーマ【JIN】に対応したウィジェット作りました!
    2018.07.31
  • AmazonJSをWordPressの有料テーマ【JIN】に合うようにカスタマイズ
    AmazonJSをWordPressの有料テーマ【JIN】に合うようにカスタマイズする方法
    2018.07.30

コメント

コメントを残す コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

  1. ホーム
  2. 【JINテーマ】カスタマイズ
  3. WordPressの有料テーマ【JIN】でカスタマイズした内容
人気記事
  • WordPressの有料テーマ【JIN】でカスタマイズした内容
    WordPressテーマ「JIN」コンテンツマガジンに広告入れるカスタマイズ
    2018/07/27
    【JINテーマ】カスタマイズ
  • WordPressの有料テーマ【JIN】でカスタマイズした内容
    WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    2019/04/24
    【JINテーマ】カスタマイズ
New Entry
  • WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    2020.06.17
    コラム
  • カテゴリーとタグのトップページをGutenbergで作り込む方法
    カテゴリーとタグのトップページをGutenbergで作り込む方法
    2020.06.16
    【SWELLテーマ】カスタマイズ
  • WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019.04.26
    カスタマイズ
  • WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    2019.04.24
    【JINテーマ】カスタマイズ
  • post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019.04.23
    カスタマイズ
Category
  • 【JINテーマ】カスタマイズ(5)
  • 【SWELLテーマ】カスタマイズ(1)
  • カスタマイズ(6)
  • コラム(7)
Page
  • About
  • プライバシーポリシー
Archive

© 2020 WPtips.

目次
閉じる