WordPressテーマ『ハミングバード』のインストールと簡単カスタマイズ 初心者編

ハミングバードカスタマイズ

このブログのWordPressテーマ『ハミングバード』は、「OPENCAGE(オープンケージ)」の有料日本語テーマです。

ブログを開設しようと思い立ち、色々なブログを参考にした際に素敵だなと思ったテーマがこの『ハミングバード』だったんです。しかし、すぐには購入しませんでした。まだ開設すらしていないのに、テーマにお金を払うことにかなり抵抗がありました。無料テーマを使い、何とか好みの見た目にしようとカスタマイズをしてました。でも、どう頑張っても有料テーマのような洗練されたデザインにはならず、購入を決意しました。

自分がインストール、カスタマイズをする時に、知りたかった情報、調べた情報、つまずいた箇所などを中心にわかりやすくまとめてあります。

この記事では、インストールの手順と初めにやるべき基本的なカスタマイズ手順を画像付きで説明しています。

親テーマと子テーマのダウンロード

購入後、「OPENCAGE(オープンケージ)」のMyPageから「ハミングバード本体(親テーマ)」最新版をダウンロードします。

続いて「子テーマ」をダウンロードします。

基本的に「ハミングバード本体(親テーマ)」には手を加えずに、カスタマイズ内容の記述は「子テーマ」を使用します。

インストール手順

ダウンロードしたファイル「hummingbird.zip」(親テーマ)、「hummingbird_custom.zip」(子テーマ)をインストールします。解凍しないでそのまま使います

① WordPressのダッシュボードの左のメニューから「外観」→新規追加をクリックします。

WPテーマインストール画面

② 「テーマのアップロード」をクリックし、「hummingbird.zip」(親テーマ)を参照またはドラッグ&ドロップで指定します。「今すぐインストール」をクリックします。

WPテーマインストール画面

③ インストールが無事完了すると以下の画面になります。「テーマのページに戻る」をクリックします。

WPテーマインストール画面

④ 同じ手順で子テーマのインストールもします。失敗した場合は、親テーマインストール→子テーマインストールの順番を守って下さい。

⑤ 子テーマが有効化された状態が以下の画面です。「サイトを表示」をクリックし、見てみましょう。

WPテーマインストール画面

⑥ インストールした当初は、『ハミングバード』の印象的なトップページやカード表示はオフになっています。無料テーマのようなシンプルさですが、ここから大変身します。

WPテーマインストール画面

カスタマイズを始めよう まずは基本情報から

「外観」→「カスタマイズ」を選択します。左のメニューから「サイト基本情報」をクリックします。

WPテーマカスタマイズ画面

ブログタイトルの設定

「サイトのタイトル」にブログのタイトルを入れます。「キャッチフレーズ」、「サイトアイコン」の設定もありますが、カスタマイズがもっと進んでからでも構いません。変更後は、必ず公開または「下書きを保存」をクリックします。

WPテーマカスタマイズ画面

記事レイアウトの変更 カード型

「カスタマイズ」→「その他オプション」。まずは記事の表示をカード型にします。アニメーションのオンオフもこの画面から行えます。カスタマイズ中は、オフにするのがオススメです。

WPテーマカスタマイズ画面

やっと『ハミングバード』らしい見た目になってきましたが、もちろん記事を投稿しないとHello world!!のみです。サンプルはこのブログのカード表示です。

WPテーマカスタマイズ画像

ブログの顔 トップページのカスタマイズ

「外観」→「カスタマイズ」→「トップページ設定」→「英語表示テキスト」・「日本語表示テキスト」を編集します。空欄のままではヘッダー画像が表示されません。

ヘッダー背景画像を指定します。こちらの画像サイズは1200×740pxで作成してあります。

WPテーマカスタマイズ画面

ここで使用したオシャレなヘッダー画像は、著作権フリーの高画質画像配布サイトからです。日本語でも検索可能、無料でダウンロード出来ます。

カモメのヘッダーアイキャッチ画像もPixabayからです。アイキャッチ画像は推奨画像サイズよりも少し大きめ640 × 371pxのものを使用しました。ヘッダーボタンには任意のページのリンクを設置出来ます。

WPテーマカスタマイズ画

形にはなってきましたが、背景画像のせいで文字が見えにくいですね。せっかくのオシャレな画像も台無しになっています。画像はもう一度探すことにして、先に進みます。

ウィジェットの追加

ウィジェットにはサイドバーやフッターに色々な項目を設定できます。

メインサイドバー

① 「ウィジェット」→「メインサイドバー」→「ウィジェットを追加」。ここには表示させたい項目を追加できます。「プロフィール」、「人気のある投稿」、「最新記事」、「SNS」等々。GoogleAdsenseなどの広告も簡単に表示できます。

「人気のある投稿」を表示するには、プラグイン「Wordpress Popular Posts」をインストールする必要があります。

 

 

メニューの設置

メニューはトップとフッターの二ヶ所に設置出来ます。

トップメニューの設置

① 「カスタマイズ」→「メニュー」→「メニューを新規作成」→メニュー名を入力、グローバルナビにチェック→次へ→「+項目を追加」

② 「カスタムリンク」にHOMEに戻るリンクを入れましたが、他にプロフィール、カテゴリー、サイトマップ、お問い合わせなどお好みで必要な項目を追加します。

WPメインメニュー設定画面

③ 右上にグローバルメニューが表示されるようになりました。

WPトップメニュー画面

フッターメニューの設置

フッター部分も同じよう項目を追加します。色々なブログのフッターを参考にして自分らしいフッターを作りましょう。

フッター部分は、一番下のフッターメニューとその上のウィジェットから追加出来るフッター部分があります。ウィジェットからは、左、中央、右の各位置にワンクリックで追加出来ます。サンプルはこのブログのフッターです。

WPテーマカスタマイズ画像

 「外観」→「メニュー」から一番下のフッターメニューを設定します。

WPテーマカスタマイズ画像

 「外観」→「ウィジェット」→[フッター] (左)・[フッター] (真ん中)・[フッター] (右)にお好みの項目を追加します。

WPテーマカスタマイズ画像

③ [フッター] (左)にタグクラウド、 [フッター] (真ん中)には、アーカイブ、カテゴリーの2項目、[フッター] (右)に最近の投稿を追加してあります。

WPテーマカスタマイズ画像

サイトカラーの変更

『ハミングバード』では、各項目のカラーを簡単に変更することが可能です。自分のブログのイメージに合ったカラーを選びましょう。

① 「外観」→「テーマ」→「カスタマイズ」→「サイトカラーの設定」

カラーの変更はリアルタイムビューで見ることが出来ます。

カラーの参考にしたのがこちらのサイトです。

日本語環境に必須のプラグイン WP Multibyte Patch

ここまではテーマに関しての基本設定でしたが、記事を表示させるために必要な設定をします。WordPressを使う上で絶対に必要なプラグイン『WP Multibyte Patch』です。
WordPressインストール直後は、オフになっているのでまだ有効化していない場合は有効化してください。有効化されている場合は、次に進みます。

WordPressに標準装備されているプラグインの一つ『WP Multibyte Patch』は、WordPressを日本語環境で利用する際に必要なプラグインです。「プラグイン」→「WP Multibyte Patch」を有効化するだけで稼働します。特に設定も必要ありません。横にブルーのラインが表示されているプラグインが現在使用中(有効)、ラインのないものが停止中のプラグインです。

WPプラグイン画面

万が一、インストールされてない場合は、「新規追加」で「WP Multibyte Patch」を検索してください。

WPプラグイン画面

このプラグインを入れておかないと、記事の表示に不具合が出る可能性があります。

BEFORE本文が2行しか表示されていません。
AFTERWP Multibyte Patchを有効にすると4行表示されました。

難しい操作なしでココまで出来た!

お疲れ様でした! 背景画像を見やすいものに変更し、何とか形にはなったと思います。手順をわかりやすく画像多めで説明しましたが、実際の作業はクリックするだけの簡単な操作です。CSSも必要ありません、ただ一つ面倒なのは画像を用意するところだけでしょうか。

WPカスタマイズ画面

あとは記事を書くだけです!

応援クリックありがとうございます!
にほんブログ村 小遣いブログ マイレージへ
にほんブログ村



ハミングバードカスタマイズ



当ブログも使っているワードプレステーマ
「ハミングバード」

サイト構築に詳しくない方でも簡単に「誰が使っても美しいサイト」を構築できます。




4 件のコメント

  • こんばんは
    とてもわかりやすく勉強になりました
    質問なんなのですが、サイドバーについてです。
    サイドバーで設定した項目が記事の画面のように、右側で表示されず
    すべて下側で表示されてしまいます。いろいろ調べたのですが原因がわからず困っています
    もし直す方法をごぞんじでしたら教えていただけませんでしょうか?よろしくお願いいたします。

    • 榊さま、はじめまして。
      サイドバーの件ですが、メインのサイドバーがフッターの位置に表示されているということですか? 色々いじってみたのですが、同じような状態になりませんでした。もし、サーバーにもうひとつワードプレスをインストールし検証出来るようなら、別にテストで入れてみることをオススメします。わたしはロリポップサーバーに幾つか練習用に入れて非公開にしたまま、デザインをカスタマイズし、うまくいったところでメインのカスタマイズをしています。ハミングバードはあまり情報がないので、ストークについて書かれているものも参考にしてみるのも良いかもしれません。お役に立てずに申し訳ありません。

      • Amy様
        早くにご回答いただいていたのに申し訳ありません。あれからいろいろ調べたのですが、原因がわからなかったんです。でもお恥ずかしながら、とても単純なことでした。表示を拡大表示にしていたのを、戻したら下に表示されいサイドバーが右に表示されるようになりました。お時間をとらせてしまい本当に申し訳ありませんでした。

        • 榊さま、ご丁寧に報告ありがとうございます。無事表示されたようで良かったです。わたしも改めてテーマをいじってみて勉強になりました。ここ最近はカスタマイズすることもなかったので、また改めて色々やってみようと思ってます。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA