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