【ha-Basic】テーマのインストール・初期設定方法

WordPressテーマ作成初心者「ひまあーと」が提供するシンプルすぎるテーマ【ha-Basic】に興味を持っていただきありがとうございます。

【ha-Basic】についての詳しい内容はこちらをご覧ください。

ここでは【ha-Basic】テーマのインストール方法、初期設定方法について紹介します。

【ha-Basic】テーマのインストール

インストールは他のテーマと同様です。

  1. テーマの入手
  2. 下のリンクからダウンロードページへ行き、テーマファイルをダウンロードしてください。

    ※バージョンによりファイルを分けていますので、「ha-Basicxx.zip」(xxはバージョン)という圧縮ファイルがダウンロードされます。インストールの際は一度解凍して、「ha-Basic.zip」をアップロードインストールしてください

  3. テーマのインストール
    1. 導入するサイトの管理画面から「外観」をクリックしてください
    2. 「新規追加」をクリックしてください
    3. 「テーマのアップロード」を選択後、「ファイルの選択」をクリックして、先ほどダウンロード後に一度解凍したフォルダの中にある「ha-Basic.zip」を選択してインストールしてください
    4. インストールが終わりましたら「有効化」をクリックすれば完了です

【ha-Basic】テーマの初期設定(他テーマからの移行方法)

WordPressを使用したてのサイトでは問題ありませんが、他のテーマから【ha-Basic】へ移行する場合には、いろいろな設定の移植が必要になります。

ヘッダー内に含めるコードの設定(移植)

Googleアドセンスの自動広告コード、アクセス解析用コード、その他ヘッダーへ含めるべきコードの移植を行います。

  1. 「外観」→「テーマ編集」を開きます
  2. 右側の一覧から「a-insert-header.php」を選択します
  3. ヘッダー内へ記述すべきコードをそのままコピペします
  4. ※phpコードを挿入する場合には開始・終了タグが必要です

フッター内に含めるコードの設定(移植)

  1. 「外観」→「テーマ編集」を開きます
  2. 右側の一覧から「a-insert-footer.php」を選択します
  3. フッター内へ記述すべきコードをそのままコピペします
  4. ※phpコードを挿入する場合には開始・終了タグが必要です

テーマのfunctions.phpに設定されていたコードの移植

テーマ切り替え前に使っていた追加機能(functions.php)の内容を転載して機能するようにします。
※同じfunction名のものが【ha-Basic】にある場合はエラーとなりますのでご注意ください

  1. 「外観」→「テーマ編集」を開きます
  2. 右側の一覧から「a-insert-functions.php」を選択します
  3. コードをそのままコピペします
  4. ※コードには開始タグ・終了タグは必要ありません

アドセンスのインフィード広告を使う

アドセンスには投稿一覧などに表示するインフィード広告という広告コンテンツがあります。インフィード広告を挿入する場合には以下のようにします(広告の作成方法については公式ページをご覧ください)

  1. 「外観」→「テーマ編集」を開きます
  2. 右側の一覧から「a-adsense-infeed.php」を選択します
  3. コードをそのままコピペします

これで各一覧(記事一覧・カテゴリー一覧・タグ一覧など)の先頭から5件目にインフィード広告が表示されるようになります。

デザインの変更

このテーマの概要で説明した通り、このテーマにはテーマカスタマイザーという機能がありません。したがってデザインの変更(CSSの変更)は

  1. 直接テーマの「style.css」の内容を変更する
  2. 追加用CSSファイルへ記述する

のいずれかの方法で行うこととなります。

いずれもブラウザのデベロッパーツールで変更箇所の特定とカスタマイズのテストをしたものを適用していきます。

※1の方法の方がページ表示時にCSSコードの上書き処理を行わないためより高速にページを表示できますが、この処理にはそれほど時間がかかりませんので2の方法がおすすめです。

このテーマではCSS追加用のファイルを用意しており、そこへ記述することで基本のCSSよりも優先されるようにしてあります。

あらかじめ変更するコードを完成させた上で

  1. 「外観」→「テーマ編集」を開きます
  2. 右側の一覧から「a-insert-css.css」を選択します
  3. コードをそのままコピペします

CSS変更後すぐに適用されない場合は、Google Chromeブラウザの場合、デベロッパーツールからリロードボタンを右クリックし、「キャッシュの消去とハード再読み込み」をクリックしてキャッシュの消去を行ってください。

画像の変更

このテーマには「ヘッダー画像」「ファビコン」「トップページのOGP画像」の3つがあります。それぞれの変更方法は以下の通りです。
※画像の変更にはFTPクライアントツールを使って直接ファイルを入れ替える必要があります。FTP?という方は

を参考にプラグインを1つ追加して変更してください。

画像ファイルはすべてテーマフォルダ内の「images」フォルダの中にあります

  1. ファビコン
  2. ブラウザのタブに表示される小さな画像です。

    「favicon.ico」というファイルがありますので同名ファイルを作り、上書きしてください(推奨サイズ:128px x 128px)

  3. ヘッダー画像
  4. トップページのヘッダーに表示される視差効果のある画像です。

    「header.png」というファイルがありますので同名ファイルを作り、上書きしてください(推奨サイズ:1260px x 800px前後)

  5. トップページのOGP画像
  6. OGPとはSNSなどへ埋め込んだ際に収集されるページの情報のことです。サイトのトップページをブログ記事一覧にしている場合(Wordpressデフォルトの場合)にはサイトを示す画像がないことから出力されないため、画像をあらかじめ設定しておく必要があります。
    「webclipicon.png」というファイルがありますので同名ファイルを作り、上書きしてください(推奨サイズ:512px x 512px)

画像の拡張子が異なると適用されませんので

などでコンバートしてください。

SNSなどにカード挿入するためのogpタグの設定

テーマを使用するサイトに関連するTwitterアカウントがある場合のみ以下の設定を行います。

  1. 「外観」→「テーマの編集」をクリックします
  2. 右のリンク一覧から「ogp-tag.php」をクリックします
  3. 26行目付近にある以下のコードを編集します
  4. $twitter_site = ”;
    このコードの”の間にアカウントID(@〇〇)を入力して保存します

簡単ではありますが、これが【ha-Basic】テーマの初期設定方法となります。