無料WordPressテーマCopsの初期設定

私が作成した無料WordpressテーマCopsの初期設定方法をご説明する。Wordpress初心者でも理解しやすいようにしたつもりだ。

用意するもの

たったこれだけ。

  • フロントページ用の横1200× 縦800以上の画像5枚
  • サイトタイトル画像(必要なら)
  • サイトアイコン画像(可能なら)

フロントページ用の画像は、https://unsplash.com/からダウンロードすると良いかもしれない。このサイトの画像は商用利用可能かつ、オシャレなものばかりなのでおすすめだ。

サイトタイトルを画像にすることもできるので、利用したければ用意する。横に細い画像(横1000 × 縦350程度)のもの。

サイトアイコン画像は、縦512×横512以上の画像を可能ならば用意する。

テーマを読み込む

コチラからCopsをダウンロードしたら、テーマをWordpressに読み込ませる。

WordPressのメニューの外観→テーマを開く。”新規追加”ボタン→”テーマのアップロード”ボタンを選択し、”ファイルを選択”からダウンロードしたCopsを選択する。”有効化”すれば読み込み完了だ。

カスタマイザーを開く


サイトを表示すると上記のようになると思う。さっそくカスタマイザーを開いてテーマの初期設定をおこなっていく。赤い枠で囲った部分の”カスタマイズ”メニューをクリックして、カスタマイザーを開く

サイトタイトルと説明文の確認

カスタマイザーを開いたら、サイト基本情報メニューを選択。

まず、サイトのメインタイトルが表示されているか確認する。また、必要ならば説明文(キャッチフレーズ)を変更する。説明文は、Chromeならばタブ部分にサイトタイトルの隣に表示される。また、Googleの検索結果として、サイトタイトルの隣に表示される。サイトタイトルを画像にする方法は後述する。

サイトアイコンも可能ならば設定する。サイトアイコンの説明欄に記述されているように、縦512×横512以上の正方形の画像を準備し設定する。

連絡先情報を表示する

次にカスタマイザーの全般設定を開く。

連絡先情報として、住所と電話番号をサイトの右上に常時表示させることができる。それの表示・非表示設定ができる。必要であれば、各項目を記入し、”連絡先情報を表示する”をチェックする。

サイトタイトル画像の変更

サイトタイトルとして画像を表示させたいなら、画像を用意し、それを設定することができる。カスタマイザーの全般設定の”サイトタイトルを画像にする”にて設定できる。

フロントページの画像の設定

フロントページに大きく配置されているスライダー画像は、必ず設定しなければならない。この機能は、Copsの要の機能なので非表示にはできない。用意した大きな画像を5枚設定する。

カスタマイザーの”フロントページカスタム”を開く。

用意した5つの画像を”スライド画像”に順次選択し設定する。選択を終え、それらを保存すると、サイトが下記画像のようになると思う。

パーマリンクの設定

パーマリンクの設定とは、ドメインの後に続くアドレスの設定だ。ここの設定を適切なものにしておくと、サイト訪問者が覚えやすいものとなるし、SEO的にも良い。

上記画像のように、今回は投稿名とする。サイトの状況に応じて適宜変更すると良い。

固定ページの作成

Copsでは、ニュースやお知らせ以外はすべて”固定ページ”で作成する。

固定ページの構成

今回は、下記の構成で固定ページを作成する。

  • 企業情報
    • 社長メッセージ
    • 企業理念
  • 製品情報
    • 製品A
    • 製品B

企業情報|固定ページを作成する

まず、企業情報の固定ページを新規作成する。いまは記事の中身を空にしておく。ここには、あとで社長メッセージ固定ページと企業理念固定ページへのリンクを記述する。作成したら忘れずに保存する。作成が完了すると、以下のように固定ページ一覧に作成された固定ページが表示される。

社長メッセージ|固定ページを作成する

つづいて、社長メッセージ固定ページを作成する。上記の固定ページの構成にするために、固定ページに親子関係をもたせる。固定ページを保存する前に、ページ属性の”親ページ”を親にしたい固定ページとする。今回は、”企業情報”とする。

企業理念・製品情報|固定ページを作成する

企業情報固定ページグループと同じように固定ページを作成していく。作成すると固定ページ一覧が下記画像のようになる。

メニューの設定

固定ページを作成したので、それをメニューとして表示させる。”外観”→”メニュー”からメニューの設定ができる。

まず、メニュー構造のメニュー名を入力し、メニューを作成する。

作成すると作成したメニューを表示する位置を指定できるようになる。メニューの位置を”ヘッダーメニューナビゲーション”に設定し保存する。

次に作成したメニューに表示する項目を指定する。左ペインのメニュー項目を追加から追加したい固定ページなどを追加する。

追加されると、メニュー名の下に追加した項目が表示される。忘れずにメニューを保存する。

下記画像のように、メニューが表示されていたら完了。

メニューに親子を設定する

上記の方法でメニューを表示できたが、”固定ページの構成”のように、企業情報の中に企業理念や社長メッセージが入れ子の状態になっていない。この場合は、メニューの編集画面において、入れ子にしたい項目をクリックしながら右へずらすことで、下記画像のように入れ子にすることができる。


設定が正しく完了すると、メニューには、企業情報だけが表示される。マウスをホバーすると、入れ子になっている社長メッセージと企業理念があらわれるはずだ。

カテゴリーの設定

続いて、ニュースとお知らせを作成していく。記事を作成する前にカテゴリーを設定する。Copsでは、カテゴリーの設定によって、フロントページに表示するものが指定される。

下記画像のようにカテゴリー設定画面を開く。投稿→カテゴリーから開くことが可能だ。

”名前””ニュース”“スラッグ”“news”と入力して、”新規カテゴリーを追加”ボタンを選択し保存する。

無事保存されると以下のように、カテゴリー一覧に新しく、名前がニュースのカテゴリーが作成されていることが確認できる。

続いて“名前”“お知らせ”“スラッグ”“notice”のカテゴリーも作成しておく。

ニュース記事の作成

実際にニュース記事を1つ作成してみよう。投稿→新規追加から記事の新規作成ができる。カテゴリーのニュースにチェックをつけることを忘れずにおこなう。完成したら忘れずに保存する。

メニューにニュースを表示する

Copsでは、投稿記事にアクセスする1つ方法としてメニューにそのカテゴリーを表示させる。実際に、メニューにニュースを表示させてみよう。メニューの編集の仕方は既に記した。しかし、別の方法もあるのでご紹介する。

まず、カスタマイザーを開く。メニューを選択。

今回はメインメニューしかないので、メインメニューを選択。

”項目を追加”ボタンを押して、追加したい項目を選ぶ。今回は、ニュースカテゴリーなので、カテゴリータブからニュースを挿入する。

これで、メインメニューにニュースカテゴリーが表示された。実際にクリックして挙動を確認しよう。

フロントページに最新ニュースを表示する

Copsでは、作成したニュースをフロントページに最新ニュースとして最大5件表示させることができる。

まず、カスタマイザーを開く。そして、フロントページカスタムを開く。その一番下あたりに”最新ニュースを表示する”チェックボックスがある。それをチェックすると最新ニュースが表示される。

お知らせの作成

ニュースと同じようにお知らせを作成する。記事を作成する際に、忘れずにカテゴリーを”お知らせ”とする。

つづいて、ニュースカテゴリーのように、メニューにお知らせカテゴリーを表示させるように設定する。

フロントページにお知らせを表示する

Copsでは、フロントページにお知らせを最大5件新着順に表示させることができる。

まず、カスタマイザーを開く。続いて、フロントページカスタムを開く。その一番下あたりに”お知らせを表示する”チェックボックスがある。それをチェックすると最新のお知らせが表示される。

固定ページを完成させる

忘れかけているかもしれないが、企業情報固定ページが空欄のままだ。ここに社長メッセージ固定ページと企業理念固定ページへのリンクを貼り付けて固定ページを完成させる。

まず、リンクにしたい固定ページのURLを下記画像のようにコピーする。

コピーした内容をリンクを貼り付ける固定ページへ貼り付ける。文字へのリンクの作り方は、以下の通り。

  • 文字を選択する
  • 選択した上にでてくるリンクボタンをクリック
  • 表示されるテキストボックスにコピーした内容を貼り付け
  • エンターボタンをクリック

以上を繰り返せば固定ページの完成だ。

フロントページの画像スライダーを完成させる

フロントページの画像スライダーには、文字列を表示させることと、リンクを貼ることができる。

まず、カスタマイザーを開く。そして、フロントページカスタムを開く。

文字列を表示する

文字列を表示したい画像の”スライドテキスト”テキストボックスに記述する。

リンクを貼る

リンクを貼りたい画像の”スライドリンク”テキストボックスに絶対パスでURLを記述する。

お問い合わせページを作成する

WordPressでは、サイト訪問者からの問い合わせページを簡単に作成できる。

Contact Form 7プラグインのインストール

メニューからプラグインを開き、”contact form”と検索ボックスに入力する。”Contact Form 7″の”今すぐインストール”ボタンを押す。そして、有効化とする。

ショートコードを固定ページに貼り付ける

“Contact Form 7″をインストールすると、メニューに”お問い合わせ”ができる。それを選択し、表示されるショートコードをコピーする。デフォルトでは、お問い合わせの内容はWordpressに登録したメールアドレスに送信される。

続いて、お問い合わせ固定ページを作成する。そこにコピーしたショートコードを貼り付けて保存する。そして、メニューにその固定ページを表示設定させれば完了だ。

フッターメニューを作成する

フッター(画面一番下の青黒い範囲)にもメニューを配置できる。下記画像の位置にある”新しいメニューを作成しましょう”から、新しいメニューを作成する。

フッターは左・中央・右側の3つの配置に分かれている。それぞれにメニューを割り当てることができる。

まとめ

“Cops”の初期設定方法は以上である。知っている人からすると、うざったいほど細かく説明したため少し長くなった。実際に作業をしてみると1時間かからないと思う。もし、機能面での要望などがあればコメントしていただければと思う。

共有する

このエントリーをはてなブックマークに追加

コメントをする

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


*