Hello Worldテーママニュアル

テーマ詳細 | ライブデモ

目次

クイックスペック(単位は全てピクセル)

  1. メインカラムの幅: 650
  2. サイドバーの幅: 280
  3. フッターウィジェットの幅: 188~1021(ウィジェットの数によって自動調整)
  4. 投稿のアイキャッチ画像の幅: 650(高さは無制限)
  5. ヘッダー画像およびページのアイキャッチ画像: 1110×440

インストール

Hello Worldテーマのインストールは次の2つの方法から選択できます。

1. 管理画面からインストール

まずはじめにhello-world-wordpress-theme.zipファイルを解凍し、hello-world.zipファイルを準備します。管理画面の外観→テーマからページ上部の新規追加をクリックし、さらにテーマのアップロードをクリックします。アップロード画面になったらhello-world.zipファイルをアップロードします。インストール完了画面になったら有効化をクリックします。以上でインストールは完了です。

2. FTPからインストール

まずはじめにhello-world-wordpress-theme.zipファイルを解凍し、hello-worldフォルダを準備します。hello-worldフォルダを…/wp-content/themes/内にFTPアップロードします。管理画面の外観→テーマからHello Worldテーマの有効化をクリックします。以上でインストールは完了です。

すでにアイキャッチ画像付きの投稿がある場合、テーマインストール後にRegenerate Thumbnailsプラグインをインストールし、画像の再生成を行って下さい。これによってテーマにあったサイズのアイキャッチ画像が自動で生成されます。

カスタマイザー

Hello Worldテーマは外観→カスタマイザーから様々な設定を行うことができます。

サイト基本情報

  • サイトのタイトル: サイト名を設定します。これは設定→一般の設定と同じです。
  • キャッチフレーズ: サイトのキャッチフレーズを設定します。これは設定→一般の設定と同じです。
  • キャッチフレーズを表示しない: キャッチフレーズを非表示にします。

フォント

  • 見出しフォント: 見出しのフォントを設定します。
  • 見出しフォントサイズ (%): 見出しのフォントサイズを設定します。単位は%です。
  • 本文フォント: 本文のフォントを設定します。
  • 本文フォントサイズ (px): 本文のフォントサイズを設定します。単位はpxです。

  • リンクカラー: リンクの色を設定します。
  • リンクホバーカラー: マウスオーバー時のリンクの色を設定します。

背景

レイアウトでワイドレイアウトを選択した場合、背景色および背景画像は表示されません。

  • 背景色: 背景色を設定します。
  • 背景画像: 背景画像を設定します。背景画像はアップロード、もしくはメディアライブラリから選択できます。設定しなければ表示されません。

レイアウト

  • レイアウト: ボックスレイアウトかワイドレイアウトかを選択します。
  • ヘッダーレイアウト: ヘッダーのレイアウトを設定します。
  • フッターレイアウト: フッターのレイアウトを設定します。
  • ノンレスポンシブ: レスポンシブデザインを無効にします。

タイトル

  • フォント: タイトルのフォントを設定します。
  • フォントウェイト: タイトルのフォントウェイトを設定します。
  • フォントサイズ (px): タイトルのフォントサイズを設定します。単位はpxです。
  • フォントカラー: タイトルのフォントカラーを設定します。
  • 文字間 (px): タイトルの文字間を設定します。単位はpxです。
  • 上マージン (px): タイトルの上余白を設定します。単位はpxです。
  • 下マージン (px): タイトルの下余白を設定します。単位はpxです。
  • 全て大文字にする : タイトルを全て大文字で表示します。

ロゴ

ロゴ画像をレティーナ対応にするためには、2倍のサイズのロゴ画像が必要になります。

  • ロゴアップロード: ロゴ画像をアップロードします。
  • サイトタイトルと置き換える : ロゴ画像によってサイトタイトルを置き換えます。
  • レティーナ対応: ロゴ画像をレティーナ対応にします。
  • 丸く切り抜く: ロゴ画像を丸く切り抜きます。
  • 上マージン (px): ロゴの上余白を設定します。単位はpxです。
  • 下マージン (px): ロゴの下余白を設定します。単位はpxです。

ナビゲーション

  • ナビゲーションバーを表示しない: ナビゲーションバーを非表示にします。
  • 検索を表示しない: ナビゲーションバーの検索を非表示にします。

ヘッダー画像

  • 現在のヘッダー: トップページ上部に表示されるヘッダー画像を設定できます。画像はアップロード、もしくはメディアライブラリから選択できます。設定しなければ表示されません。

投稿

  • 表示: 投稿一覧ページでの投稿の表示を設定します。
  • 投稿者を表示する: 投稿者名およびプロフィールを表示します。
  • カテゴリーを表示しない: 投稿のカテゴリーを非表示にします。
  • 前後投稿ナビゲーションを隠す: 前後投稿ナビゲーションを非表示にします。

フッター

フッターテキストではHTMLタグはaタグおよびbrタグのみ許可されています。

  • フッターテキスト: フッターにテキストを表示します。
  • クレジットを表示しない: WordPressおよびThemehausへのクレジットを非表示にします。

カスタムCSS

カスタムGoogleフォントは「Open+Sans:300,300italic|Roboto:100,900」のように設定します。

  • カスタムCSS: CSSを追加設定します。
  • カスタムGoogleフォント: Googleフォントを追加読み込みします。

メニュー

メニューの項目は外観→メニューから設定できます。

  • ナビゲーションバー: ナビゲーションバーに表示されるメニューを設定します。設定しなければページ一覧が表示されます。
  • ヘッダーメニュー: ヘッダーに表示されるメニューを設定します。設定しなければ表示されません。
  • フッターメニュー: フッターに表示されるメニューを設定します。設定しなければ表示されません。
  • フッターソーシャルリンク: フッターに表示されるソーシャルリンクを設定します。テキストは表示されず、アイコンのみが表示されます。設定しなければ表示されません。

ウィジェット

それぞれのウィジェットを設定できます。これは外観→ウィジェットの設定と同じです。

固定フロントページ

  • フロントページの表示: サイトトップに表示するページを変更します。これは設定→表示設定の設定と同じです。

ウィジェット

Hello Worldテーマは外観→ウィジェットから各ウィジェットを設定できます。Hello Worldは7つのウィジェットに対応しています。

サイドバー

通常のサイドバーです。サイドバーも固定サイドバーも使用しない場合、1カラムデザインになります。

固定サイドバー

PCではスクロールに追随して表示されます。なお、ここにAdSenseを貼るとAdSenseの規約(広告の追随禁止)に違反しますので注意して下さい。

フッター1/フッター2/フッター3/フッター4

フッターウィジェットエリアは左から順に4つあり、使用する数によって幅が自動的に調整されます。1つも使用しない場合は表示されません。

投稿後

投稿の後に表示されます。

Hello Worldテーマは外観→メニューから各メニューを設定できます。Hello Worldは4つのメニューに対応しています。

  • ナビゲーションバー: ナビゲーションバーに表示されるメニューを設定します。設定しなければページ一覧が表示されます。
  • ヘッダーメニュー: ヘッダーに表示されるメニューを設定します。設定しなければ表示されません。
  • フッターメニュー: フッターに表示されるメニューを設定します。設定しなければ表示されません。
  • フッターソーシャルリンク: フッターに表示されるソーシャルリンクを設定します。テキストは表示されず、アイコンのみが表示されます。設定しなければ表示されません。

新しくメニューを設定する場合、ページ上部の新規メニューを作成をクリックし、メニューの名前を自由に入力してメニューを作成をクリックします。

次に画面左側から追加したいページを選択しメニューに追加をクリックします。リンクやカテゴリーを追加することもできます。また各項目はドラッグで順番を変更できます。

メニューの項目・順番が決まったら、ページ下のメニュー設定テーマの位置でメニューを表示したい場所を選択し、メニューを保存をクリックします。

以上でメニューの設定は完了です。さらに別のメニューを設定する場合は再び新規メニューを作成から行って下さい。

以下のWebサービスおよびRSSフィードへのリンクには自動でアイコンが追加されます。
CodePen・Digg・Dribbble・Dropbox・Facebook・Flickr・Google+・GitHub・Instagram・LinkedIn・Pinterest・Polldaddy・Pocket・reddit・Skype・StumbleUpon・Tumblr・Twitter・Vimeo・WordPress・YouTube

投稿

Hello Worldは投稿画面のフォーマットから投稿フォーマットを選択できます。対応しているフォーマットは標準・アサイド・音声・チャット・ギャラリー・画像・リンク・引用・ステータス・動画です。

それぞれの表示がどのようになるかはライブデモの投稿フォーマットカテゴリーをご覧下さい。なお、投稿フォーマットは必ずしも使う必要は無く、画像や動画の投稿であっても標準として投稿しても問題ありません。

また、Hello Worldは投稿画面のアイキャッチ画像からアイキャッチ画像を設定できます。

ページ

Hello Worldは固定ページ画面のページ属性テンプレートからページテンプレートを選択できます。用意されているページテンプレートは通常ページサイドバー無しページ全幅ページの3つです。

また、固定ページ画面のアイキャッチ画像からアイキャッチ画像を設定できます。

アップデート

Hello Worldテーマのアップデートは次の3つの方法から選択できます。

テーマファイルを直接変更している場合、テーマをアップデートするとその変更は失われてしまいます。これを避けるためには子テーマを使用して下さい。

1. オートアップデート(バージョン1.1.0以上)

Hello Worldテーマはアップデートされると管理画面のダッシュボード→更新および外観で通知されます。ダッシュボード→更新Hello Worldテーマを選択し、テーマを更新をクリックします。以上でアップデートは完了です。

2. 管理画面からアップデート

あらかじめ新しいHello Worldのzipファイルをダウンロードしておきます。管理画面の外観→テーマで一旦別のテーマを有効化し、Hello Worldテーマ詳細をクリックし、さらに右下の削除をクリックします。古いテーマが削除されたら、ページ上部の新規追加をクリックし、さらにテーマのアップロードをクリックします。アップロード画面になったらzipファイルをアップロードします。完了画面になったら有効化をクリックします。テーマの設定は自動で引き継がれます。以上でアップデートは完了です。

3. FTPからインストール

あらかじめ新しいHello Worldのファイルをダウンロードしておきます。FTPでアクセスし、…/wp-content/themes/hello-world/フォルダを削除し、新しいhello-worldフォルダを…/wp-content/themes/内にアップロードします。管理画面の外観→テーマからHello Worldテーマの有効化をクリックします。テーマの設定は自動で引き継がれます。以上でアップデートは完了です。

サポートプラグイン

Hello Worldは次のプラグインをサポートしています。

Jetpack

Jetpackはインストール型のWordPressにレンタルブログ型のWordPress.comの機能を追加するプラグインです。Hello Worldは無限スクロールへの対応や、追加ウィジェットのスタイリングが行われています。

Contact Form 7

Contact Form 7はお問い合わせフォームを作成するシンプルかつ柔軟なプラグインです。Hello Worldはフォームのスタイリングが行われています。