7e OFFICIAL BLOG

テーマの初期設定!無料テーマXeoryを例にわかりやすく解説~はじめてのWordPress構築~

ここでは、バズ部が提供するサイト型の無料テーマ「Xeory Extention」を例に、基本的なWordPressの構築手順を説明します。デザインの変更などの具体的なカスタマイズ方法については、後の記事で順を追って説明します。

まずは下記ボタンから、テーマのダウンロードページにアクセスしてください。

Xeory Extention 無料テーマ

テーマのダウンロード手順

「Xeory Extention」のダウンロードページに移動したら、さっそく「無料ダウンロードする」というボタンをクリック。

すると「新規会員登録」というページが表示されると思うので、はじめてバズ部のテーマをダウンロードする方は、必要事項を入力してユーザー登録を完了させてください。すでに会員の方は、IDとパスワードを入力して「ログイン」しましょう。

テーマデータとなる「xeory_extention.zip」というzipファイルをダウンロードできたら、デスクトップなどの分かりやすい場所に保存します。(今回ブログ型テーマ「Xeory Base」は使いません。またzipファイルは展開しないように注意してください。

以上で、テーマのダウンロードは完了です。

テーマのインストール手順

次に、WordPressのログインページ(http://ドメイン名/wp-admin/)にアクセスし、WordPressのインストール時に設定したユーザー名(またはメールアドレス)とパスワードを入力し、管理画面に「ログイン」します。

管理画面にログインできたら、左側メニューの「外観」という項目の中の「テーマ」をクリックします。

テーマ画面のタイトル横にある「新規追加」ボタンをクリックし、続けて「テーマのアップロード」をクリックします。すると下記のような、ファイルのアップロードボタンが表示されます。

「ファイルを選択」をクリックし、先ほどダウンロードした「Xeory Extention」のzipファイルを選択するか、デスクトップなどの保存先から直接ボタンの上にドラッグアンドドロップし、「今すぐインストール」を実行します。

『アップロードしたファイル xeory_extention.zip からテーマをインストールしています』と表示される画面の一番下に、「有効化」という項目があるのでクリックし、テーマを有効化させます。

以上で、テーマのインストール作業も完了です。

テーマの基本カスタマイズ

基本ページの作成

ひとまず、「トップページ」と「ブログ」というタイトルの固定ページをそれぞれ作成します。
管理画面の左側メニューの「固定ページ」から「新規追加」で、ページの追加(削除)や編集が行えます。内容は省略し、タイトルを入力したら右上ボタンから「公開」します。

この時、「ブログ」のレイアウトは2カラム(右サイドバー)に設定しておきます。(後述する表示設定でホームページに設定したページは、1カラムに固定されます。)

次に、左側メニューの下段にある「設定」から「表示設定」をクリック。

ラジオボタンを「固定ページ(以下を選択)」に切り替えて、それぞれ「ホームページ」と「投稿ページ」のドロップダウンメニューから先ほど作成した「トップページ」と「ブログ」を選択し、「変更を保存」をクリックします。

初期設定

「Xeory Extention」は初心者にやさしい構成になっているので、左側メニューに「初期設定」という項目が用意されています。特に難しい内容ではないので、説明書きに従って入力を進められると思いますが、多少注意が必要な項目については簡単に説明をします。

■ トップページのロゴ
「テキストロゴ」は、画像ロゴの代わりに表示されるテキストです。画像ロゴがない場合などは、サイトタイトルとなるテキストを入力してください。「画像ロゴ」を設定する場合は、ラジオボタンを切り替えてから、任意のロゴ画像をアップロードしてください。(ロゴは基本的に推奨サイズで制作し、「フルサイズ」でアップロードしてください。

■ トップページのメタタグの設定
メタタグとは、ウェブページの情報を検索エンジンやブラウザに伝えるタグのことで、Googleなどで検索した際に表示されるサイトタイトルや概要文のことです。設定しない場合は自動で表示されるので、入力は必須ではありません。

■ その他の設定
「カラー設定」ではベースとなるカラーを選択できますが、後の記事で選択肢以外のカラーにする方法を解説しますので、ここでは「デフォルト」を選択しておいてください。「検索エンジンでの表示」という欄のチェックは、ウェブサイトの正式公開時には必ず外すようにしてください。
すべての入力や設定が完了したら、ページ下にある「変更を保存」というボタンを必ずクリックしてから終了するようにしましょう。

テーマ設定

次に、左側メニューから「テーマ設定」という項目を編集していきます。ここではトップページとフッターの設定を行うことができます。下記に参考資料を用意しましたので、確認しながら設定を進めてください。

参考資料: Xeory_Extention_テーマ設定

■ ファーストビューの設定
トップページのファーストビューとなる部分です。「キャッチコピー」と「サイト説明文」は全体のバランスを考えながら、編集を重ねてください。背景はCSSを使って画像に変更しているので、後の記事で詳しく説明します。
■ クローズアップ記事の設定
クローズアップ記事の設定では、「固定ページ」「カテゴリー」「投稿ページ」「オリジナル」の4パターンから選択することができます。参考資料ではカテゴリーを選択しています。
■ サービス記事設定
クローズアップ記事同様、4パターンから選べるようになっています。参考資料ではオリジナルを選択しています。省略したい項目は空欄にすることで、非表示にできます。
■ お問い合わせフォームの設定
後の記事でプラグインのインストール方法、CSSを使ったカスタマイズの方法について説明します。
■ フッター設定
ロゴ画像はトップページのロゴ同様、サイズはフルサイズでアップロードしてください。フッターに表示するテキストは、バランスを考えて簡潔な文章にするといいでしょう。

メニューの設定

最後にメニューを設定します。管理画面の左側メニューの「外観」から「カスタマイズ」をクリック。(「外観」 > 「メニュー」で設定することもでいますが、今回はプレビュー画面を見ながら編集できる「カスタマイズ」からの方法を説明します。)

カスタマイズ画面で「メニュー」をクリックすると、「メニューを新規追加」というボタンがあるので続けてクリックしてください。 「メニュー名」の入力欄と、メニューの表示場所となるチェックボックスが表示されるので、それぞれの場所に表示したいメニューを青枠内の項目から追加して「公開」します。

以上で、テーマの初期設定および基本的なカスタマイズは完了です。

次回以降の記事で、CSSを使った実装的なカスタマイズについての説明をします。

関連記事一覧

PAGE TOP