サイト作りに必要な機能だけを搭載したベーシックなWordPressテーマ【ha-Basic】
いつ見てもかわいい我が家のアイドル「モモ」君です（笑）。テーマの画像に使用しています。そんなことはどうでもよかったですね、失礼しました。
WordPressでサイト作りをする上でテーマ選定は重要なファクターですね。Wordpressは最終的にテーマを通じて表示されるCMS(コンテンツマネージメントシステム)ですから、Wordpressでのサイト表現はテーマに始まりテーマに終わると言っても過言ではないでしょう。
最近では公式リポジトリ（WordPressの公式テーマ配布ページ）で配布されている多くの無料テーマだけでなく、独自機能を搭載した有料テーマが数多くリリースされており、よくわからないが故に結構な金額の有料テーマを購入される方も多いと思います。
でも良くわからないからで購入したテーマも、ある程度使ってみると結局自分で勉強してカスタマイズする必要が出てくる機会があり、その時になって特に有料テーマは必要だったのか？？というところに気づく方も多いのも事実だと思います。
そもそもWordpressはブログツールではつまらない、日記作り以上の機能が使えない・・という方が次に使用するホビー魂満載のサイト作成ツールですから、ある程度の機能があって、ある程度の表示・表現ができる無料のテーマを使ってみる、そして自分好みにカスタマイズしてみるというのが醍醐味でもあります。
そこで、10数年Wordpressでのサイト作りをしてきた経験を活かし、今まで使用してきたテーマの良いところ、悪いところ、SEO対策などを考慮して独自に作成したのが今回紹介する【ha-Basic】テーマです。
初心者の方のベーシックテーマとして、また、カスタマイズベーステーマとして利用いただければ幸いです。
現在の最新バージョンは1.1です
※テーマにはそれぞれメリット・デメリット、切り替え時に気を付けることなどがありますので、このページを最後までお読みいただいてから使用するかどうかを決めていただければ幸いです。
当たり前の話ですが、このサイトももちろん【ha-Basic】を使用しています（色の変更、一部紹介していない機能の追加やサイトに合わせたコードの変更などをしています）。
標準的なテーマではできて、【ha-Basic】ではできないこと
標準的なテーマ・・・というのが何なのか？？という話になってしまいそうですが、一般的なテーマでできるだろうという事柄のうち、【ha-Basic】にはない機能について紹介しておきます。
これらはテーマ配布を促進する上ではマイナス要素となる事柄ですが、できることよりもできないことの方がテーマ選定を行う上でもっとも重要な判断基準になると思いますの、でできることよりも先に紹介させていただきます。
独自のテーマカスタマイザーは存在しません
公式リポジトリで配布されている無料テーマや高機能を強調している有料テーマなどでは、初心者の方でも簡単にある程度のデザイン変更ができるように独自のテーマカスタマイザーが搭載されています。
冒頭で書いた通り【ha-Basic】は無駄なものは徹底的に排除したテーマですので、一度設定したら変更することの少ないカスタマイザーは必要ない、むしろ表示の度にこれらの設定を参照して「もしも・・もしも・・」と処理を繰り返すことでサーバーの負荷上昇につながったり、表示速度の遅延要因となると考えています。
従って、色の変更１つにしてもCSSについて最低限の知識は必要となりますので、カスタマイズ経験のない方、できるだけ簡単にサイトデザインを変更したいという方にとっては使いにくいテーマでしょう。
テキストエディタ以外では使いにくい（便利に使えない）テーマです
【ha-Basic】テーマはテキストエディタ（Wordpressのバージョン5.0以降ではClassic Editorプラグイン使用）で最適化されたテーマですので、
- Gutenbergエディタ用の特別なブロックは容易していません
- ビジュアルエディタでの独自のエディタスタイル（テキストエディタでいうカスタムボタンと簡易プレビュー表示）には対応していません
従ってGutenbergエディタでより高度な表現を使うには機能を拡張するようなプラグインを使っていただくことになりますし、ビジュアルエディタではデザイン要素が反映されませんので実際の表示はプレビューで確認していただく必要があります。
なぜこうしているのかというと作者である私自身がテキストエディタ派であること、それからどれだけビジュアルエディタのスタイルを実際の表示に近づけても、結局プレビューしないと実際の表示は確認できないことがあるからです。
現在Gutenbergエディタやビジュアルエディタでの記事作成を行っている方にはこのテーマは不向きだと思いますので、別のテーマを使用されるか、ご自身でカスタマイズいただく必要があります。
※前述したように私自身はテキストエディタしか使用しませんので、今後よほどのことがない限りこれらの対応をする予定はありません。
AMPには対応していません
特にモバイルファーストインデックスになっているサイトにおいてAMP化はSEO対策として効果的という話をちらほら聞きますが、このテーマはAMPに対応していません（モバイルフレンドリーテストは合格しています）。
また、AMP化するためのプラグインを使用しての検証も行っておりませんので、AMPでモバイルページを表示したいという方には不向きなテーマです。
現在AMPという技術を使っているのがGoogleのみというところからこの仕様にしていますが、多くの検索エンジンでこの仕組みが利用されるようになった段階で対応を検討しようと思っています。
キャッシュ系プラグインや圧縮系プラグインとの相性はチェックしていません
ある程度これらの機能を持つプラグインとの相性はチェックしましたが、動作保証はしておりません。
そもそも【ha-Basic】テーマはこれらのプラグインを使用しなくてもある程度の表示速度が確保できるように設計していますし、何よりこれらのプラグインが動作することで逆に表示速度を落とす結果となるサイトも多いことから使用自体を推奨していません。
【ha-Basic】テーマを使ったサイト事例
このテーマを使ってどんなサイトができるのか？？気になるところですよね？ここではこのテーマを使ったサイトを実際に紹介していきます。
同じテーマでもずいぶん雰囲気違うなぁというのを実感いただけるかと思います
※配布を開始したばかりですので私が管理するサイトのみの紹介となります。
※【ha-Basic】テーマを使われている方でここへの掲載を希望される方募集中です。
また、インストールして基本機能のまま、基本カラーのままのものはこちらで確認できます。
※開発用のサイトとして作ったサブディレクトリサイトですのでテストなどで表示内容が多少異なる場合があります。
今ご覧になっているサイトの仕様等についてはこちらを参照ください。
【ha-Basic】の動作環境特徴と標準機能ほか
動作環境
テーマの開発環境、動作環境（本サイトの環境）は以下の通りです。
- WordPressバージョン：5.2.2
- PHPバージョン：7.3.6
- Mysqlバージョン：5.5.5-10.2.25-MariaDB
- 利用サーバー：カラフルボックス
※2019年7月5日現在の情報です
基本として備わっている機能
思いつくままに列記しましたので見づらくて申し訳ありませんが、【ha-Basic】に搭載されている機能の一覧です
- できる限り無駄なコード、余分な読み込みを排除し、高速表示させるようにしているテーマです
- モバイル表示・パソコン表示を自動で切り替えるレスポンシブタイプのテーマです
- 投稿・固定ページに自動生成されたパンくずリストを表示するようにしています
- 投稿最下部に関連記事を自動表示するようにしています
- テキストエディタにボタンを追加し、様々なコンテンツを簡単に挿入できるようにしています
- 投稿・固定ページの簡易修正時に編集画面で更新日を変更しないようにできます
- クイック編集時に更新日が更新されないようにしています
- 固定ページでもコメント欄を設置できるテンプレートを用意しています
- タイトルの下、本文末にSNSのシェアボタンを実装しています
- 画像付き新着記事ウィジェットを標準装備しています
- 見出しタグの多い投稿・固定ページでタイトル下に開閉式の「目次」を自動表示
- 独自のアクセスカウント機能を搭載。管理画面の一覧・管理者のフロントエンドタイトル下へ累計閲覧数を表示するようにしています
- 独自のアクセス数カウント機能を元にした「人気記事」ウィジェットを標準装備しています
- 投稿タイトル下、本文下にウィジェットエリアがあり、広告などを自由に挿入できるようにしています
- 記事一覧の5項目上にAdsenseのインフィード広告を自動挿入できるようにしています
- 本文下ウィジェットの他、本文内の最下部へ本文の内容の続きとして定型コンテンツを挿入できるようにしています
- ショートコードで投稿や固定ページの本文内へ簡単に新着記事の一覧が挿入できるようにしています
- 「h2」見出しタグ上に任意の広告や定型文などを自動的に表示できるようにしています
- SEO対策として投稿・固定ページごとに「キーワード」「ディスクリプション」項目を設け、自動でタグ出力されるようにしています
- 追加CSS、追加function用、追加header、追加footer用のファイルを別にして子テーマ使用時のように使うことができるようにしています
- 色を指定している部分のみのコードを持つ「color-style.css」を用意していますので、テーマカスタマイザーなしでも比較的簡単にサイト全体の色を指定することができます
- prism.jsを使い、コードの紹介記事など作成時にきれいに表示できるようにしています
- 埋め込みYoutube動画を画面いっぱいに高速表示できるようにしています
- ヘッダー画像を画像スライダーへ変更できます（要カスタマイズ）
- SNSへの記事埋め込み時きれいに表示されるようOGPタグを自動出力するようにしています
- json-LDを用いた構造化データの自動生成ができるようになっています（各ページ、パンくずリスト）
- 画像アップロード時、テーマで使うためだけの余分なサイズの画像を複製しないようにしています
- 管理画面側のCSSファイルを設置。管理画面のデザイン変更ができます
- ログインしているユーザーのAdsense広告誤クリックを防止しています
- 本文内に挿入する画像のalt属性が空の場合、自動でページタイトルを設定して出力します
※リンクとなっている項目についてはリンク先の詳細情報を確認ください。
シンプルなテーマ構造
高機能なテーマではいろいろな部品ファイルをいろいろな場所から呼び出して使用するという方式のものがほとんどで、自身でカスタマイズしようにもテーマ構造の理解からスタートとなることが多いです。そして多くの場所で同じ部品を使いまわす構造から、１つカスタマイズすることで全体に影響し、だんだんどうしたらいいのかわからなくなってくる・・なんてこともあります。
【ha-Basic】テーマはできるだけ構造をシンプルにし、できるだけファイルの使いまわしはしないようにしていますので、後からカスタマイズしやすい構造になっています。
【テーマ仕様】子テーマ不要な設計にしています
このテーマに興味を持つ方は当然「子テーマ」という用語を見聞きしたことがあるでしょう。子テーマとは
- 親テーマにない機能や設定を追加するfunctions.php
- 親テーマのデザインを上書きして独自のデザインを適用するstyle.css
などを現状使用しているテーマとして稼働させ、親テーマを読み込んだ上で子テーマの内容を反映させるというものです。
子テーマのメリットとしては親テーマが更新されても自身で追加した機能やデザインが無くなってしまわないことなのですが、デメリットもあります。
主なデメリットは以下の２つです。
- header.phpなど親テーマのファイルを子テーマにコピーしてカスタマイズを行った場合に親テーマの更新でテーマの構造自体が変更されたとき、正常に動作しない場合がある
- ページを表示する際に２つのテーマ（親テーマ・子テーマ）の両方を参照することとなり、処理の無駄＝速度の遅延が生じることがある
【ha-Basic】ではデメリットの部分が生じないようあらかじめ子テーマとして必要な要素を親テーマの中へ盛り込んで後から追記したものが分かる構造にしているため、子テーマは原則必要ありません。
【テーマの更新】カスタマイズ方法はどんどん紹介していきます
PHPのバージョン進行やWordpressのバージョン進行により不具合が発生する場合を除き、このテーマの更新は予定しておりません。
と言ってしまうと「作りっぱなし」感が強くなってしまうので少々補足させていただきます（笑）。
ここまで読んでいただいて分かる通り、このテーマはカスタマイズしていくことを前提とし、基本的なテーマに現状いろいろなテーマで採用されているような機能を追加したものとなっています。
従ってこのテーマを使われる方＝どんどん自分好みに改造する方と捉え、テーマの更新によって、
- テーマの更新をしたらデザインが大きく変わってしまった
- テーマの更新をしたら今まで動いていた機能が使えなくなった
といったテーマ更新にまつわる不都合を極力防ぐため、このバージョンを完成品として公開しております。
とはいえ、プラグインなどの付帯機能を追加しなくてもできるようなカスタマイズ内容については発見都度解説記事をリリースしていきますし、テーマの軽微な不具合修正についても逐次ご案内しますので、今回ダウンロードいただくテーマファイルと比較して、必要な部分やご自身のサイトで使える部分のみ採用していただければ大丈夫です。
これを踏まえ、前述したように本来子テーマを使って追記していくファイルをあらかじめ親テーマファイル内に配置し、「これを追加したよ！」とサイトを管理される方が分かるようなテーマ構造にしています。
テーマ切り替え時の注意事項
【ha-Basic】テーマへの切り替え時に限らず、テーマを変更する場合に確認や留意しておきたい事柄について紹介します。
テーマ独自の機能が使えなくなる可能性があります
例えば【ha-Basic】のキーワードタグ、ディスクリプションタグの出力。これはカスタムフィールドに入力データを保存し、それを元にページ表示時にhtmlソース内へタグとして出力するようになっています。
現在使用しているテーマに同様の機能があり、それを使ってタグの出力をされている場合、カスタムフィールドのフィールド名が異なるとタグは正常に出力されません（タグの内容が空になります）。
そうするとせっかく行ったSEO対策としての設定が台無しになることがあり、検索経由でのアクセスに影響が出る場合があります。また、元のテーマに戻した場合にも過去に入力したカスタムフィールドが復元されない場合もありますので注意が必要です。
ちなみに【ha-Basic】では以下のカスタムフィールドを使用しています
- メタキーワード・・・meta_keywords
- メタディスクリプション・・・meta_description
- ページ閲覧数・・・post_views_count
- Noindexの設定・・・is_noindex
- Nofollowの設定・・・is_nofollow
- 更新日を更新するかどうかの判定・・・update_level
これに該当するデータを格納するカスタムフィールドのフィールド名がテーマ変更前後で異なる場合には、これから使うテーマのカスタムフィールド名を今まで使っていたフィールド名に合わせてから有効化することで、データ消失などの可能性は少なくなりますから、安易にテーマを有効化する前に必ず確認するようにしましょう。
今まで使用していたプラグインが使えなくなる可能性があります
このテーマと同じ機能を持つプラグインや、プログラムの中の記述（関数名など）が同じプラグインについては動作しなくなったり、最悪の場合には競合が解消できずサイトが動作しなくなる可能性があります。
万が一テーマ変更後サイトが動作しなくなった場合にはFTPクライアントツールを使って当該プラグインフォルダを別名にして強制停止させることができますので、ひとまずサイトの動作を復旧させた上で原因の調査、対処をする必要があります。
※この場合テーマを元に戻して再度プラグインを動作する状態にしても完全に元に戻らない場合がありますので留意ください
ウィジェットの設定が変わったり、消失する可能性があります
WordPressテーマの中には標準のウィジェットの他、テーマ独自のウィジェットやウィジェットエリアが使えるものが多数あります。独自のウィジェット及びウィジェットエリアはそのテーマが有効化されたときに機能するものですので、テーマ変更によって以下の不都合が発生する場合があります。また、不都合解消のため元のテーマに戻しても復元されないケースがあります。
- 独自ウィジェットの内容が消失する可能性があります
- 独自ウィジェットエリアに挿入しているウィジェットが別の場所へ移動したり、ウィジェットそのものが消失する可能性があります
これを防ぐためには、
- 標準のウィジェット（テキストウィジェット）などで同じ機能を果たすことができるのであれば、そちらを使用するようにしておく
- 独自のウィジェットエリアに挿入したウィジェットは一旦標準のウィジェットエリア（サイドバーウィジェット）などに退避させておく
等前準備をしておくことをおすすめします。
Adsenseの自動広告
ヘッダー内にコードを入れてあとの表示はお任せの「Adsense自動広告」。経験測ではありますが、テーマを変更するとページの構造、余白スペースなどが変化するため、コードを挿入してからしばらくは自動的に広告が表示されない、おかしな場所に表示されるといったことが発生します。また、今までよりも消極的な表示となる場合もあります。
これは同一テーマで大がかりなカスタマイズを行った場合同様のことが言えますので、今自動広告がうまく機能していて収益が安定しているのであれば、テーマ変更やテーマの大きなカスタマイズは控えた方がいいと思います。
テーマ変更の際にダメージを最小限にするには、自動広告で挿入される広告が表示されるまでの間は旧来のAdsense広告を手動で貼り、自動広告が表示されるようになったら順次外していくという方法が無難かと思います。
さいごに
著作権等について
WordPressテーマであるためライセンスはGPLです。
サイトでの利用は自由、改造も自由、本テーマを基にして作成したテーマを配布することも自由です。
しかしながら「犯罪行為を行っているサイト」「コンテンツのコピーを掲載しているサイト」といった公序良俗に反するサイトなどでこのテーマを使用されることは、テーマ作者としてこれほど残念なことはありません。ライセンス上、そうしたサイトでの利用を禁止するわけではありませんが、本テーマが社会にとって有益に利用されることを願っております。
このテーマに機能の追加などを行ってご自身のサイトなどでオリジナルテーマとして再配布を行う場合、特に一報いただく必要はありませんが、
- テーマ名・作者情報は必ず変更すること
- 次項の「クレジット表示」を削除または自身のものに変更して配布すること
を必ず行っていただきますようお願いいたします。
また、テーマ自体はGPLライセンスに準拠していますので自由に使用、改造、再配布が可能ですが、本紹介記事ならびに本サイト内のコンテンツにおける著作権は、作者である「ひまあーと」にありますので、一切の無断転載を禁じます。
クレジット表示について
より多くの方に【ha-Basic】テーマのことを知っていただけるよう、フッター末尾にこのページへのリンクを含むクレジット表示をさせていただいております。
この表示はfooter.phpを編集してコードそのものを削除するなどして表示されないようにすることができますが、邪魔でなければそのまま表示されるようにしておいていただけますようお願いいたします。
免責事項
このテーマはあくまでも自身用に作成したものを、せっかくだからいろいろな方に使っていただきたいという思いの元配布させていただいております。
- テーマを【ha-Basic】にしたら表示に不具合が起きた
- テーマを【ha-Basic】にしたらサイトが動作しなくなった
- 不具合が起きて元のテーマに戻しても動作や表示が元に戻らなくなった
等の問題が発生しましても、当方では一切責任を負いませんので、了承の上使用いただけますようお願いいたします。
【ha-Basic】のダウンロードと設定
ここまで長い文章を読んでいただき、ありがとうございました。それでは以下のリンクからテーマをダウンロードいただき、サイト作りをお楽しみください。
無料版・応援版ともクリエイターによる創作の総合マーケット「BOOTH」からのダウンロードになります
なお、当サイトの維持、Wordpressに関する情報の配信、テーマの開発・研究を応援してくださる方も募集しております。「がんばってね！」と応援いただける方は↓の【ha-Basic 開発応援版】をご購入ください。
※テーマファイルの内容は無料版と同じですので、無料版でまずお試しいただいてから応援版をご購入いただけますようお願いいたします。
無料版・応援版ともクリエイターによる創作の総合マーケット「BOOTH」からのダウンロードになります
インストール方法は他のテーマと同じです。管理画面の「外観」をクリックし、「新規追加」→「アップロード」と順にクリックした後、ダウンロードいただいたファイルを選択した後にインストールと有効化を行ってください
※有効化前に↑の【テーマ切り替え時の注意事項】を必ずご確認ください
初期設定
【ha-Basic】テーマは標準で入っているトップページのヘッダー画像（大きな画像）を変更すればひとまず使うことができるようになります。ここではヘッダー画像の変更方法のみ紹介しておきます。その他のカスタマイズ方法の紹介記事については今後どんどん追加していきますのでよろしくお願いします。
ヘッダー画像は通常のテーマと違い、メディアにアップロードした画像ではなくテーマフォルダの中の画像を直接出力するようにしていますので、変更にはFTPクライアントツールが必要です。もしもFTPなんて知らない、サーバーの仕様でFTPが使えないという方は
プラグインを使ったファイルの転送方法については
画像ファイルの場所は「Wordpressのインストールフォルダ」→「wp-content」→「themes」→「ha-Basic」→「images」の中にあります。
この中のheader.pngというファイルがヘッダー画像のファイルになります（我が家の「モモ」の写真です）。
まずはお気に入りの画像を選び、画像サイズを整えます。最適な画像サイズは幅1260px高さ800pxです（視差効果でスクロールとともに画像が動く感じにしていますので、高さは大きめの方がいいでしょう）。
画像の切り取りやサイズ変更をするには
最近のデジカメなどで撮影した画像は密度が濃い（画像ファイルサイズが大きい）のでインターネット上で見るために差し支えない程度に圧縮して使用することをおすすめします。画像の圧縮は
※メディア内のファイルではないため、画像圧縮系のプラグインでは圧縮できませんので、ご自身で圧縮する必要があります
自身で画像を用意するのが難しい、プロが撮影したきれいな画像が使いたいという方は
サイズの変更が終わったら画像の名前を「header.png」へ変更して保存後、サーバー内にある画像と入れ替えます。
あとは基本的にウィジェットの内容を自身のサイト用にすれば動作します。
その他の設定方法についてはこちらへ随時追加していきますので該当する記事を参照ください。
また、テーマのカスタマイズ方法等についてはこちらへ随時追加していきますので該当する記事を参照ください。
【ha-Basic】テーマの不具合報告やコメント、お問い合わせなど
【ha-Basic】テーマは原則現状渡しとなりますので、不具合に対する補償などは一切しておりませんが、今後開発を進めていく上で貴重なご意見をいただければ幸いです。