WordPressでサイトを制作する時の手順(その1)
ここでは、4回に渡ってWordpressでwebサイトを制作していこうと思います。
第1回目の今回は、大きく分けて
- サイトの設計
- 固定ページの作成
- パーマリンクの設定
- ページの編集
というステップでWordPressを使ったサイト制作の手順について説明していきたいと思います。
今回は、プログラミング未学習者を対象としているので、CSSのコードには一切手を触れないでサイトを制作してみたいと思います。
目次
必要なページとコンテンツを整理する
まずは、実際に作り始める前に必要となるページとコンテンツを簡単に整理するところから始めましょう。
今回は、仮想の雑貨屋のサイトを作っていきたいと思います。
完成形は以下のとおりです。
作成するページとコンテンツを整理してみました。
・トップページ
ー ヘッダー
ー メインビジュアル
ー メインコンテンツ
ー フッター
・ブログ記事一覧
・アクセス
・お問い合わせ
ー フォームの作成
WordPressはプログラミングのコードを触らなくてもよいため、制作途中であってもデザインや構成の変更が簡単にできます。
そのため、サイトの設計を行わずにいきなり制作に突入してもなんとか制作できると思います。
しかし、予め必要なページ、掲載したい情報やコンテンツ、文章、画像などを準備しておくとよりスムーズにサイト制作を行うことができます。
WordPressに限ったことではなく、実際のサイト制作の現場では、ワイヤーフレームやモックアップといった設計図を作成し、予めサイトの構成と見た目を考えた上で制作に入ります。
私の経験からも、前もってサイトの構成をメモなどにアウトプットしてから制作に突入することをおすすめします。
下はSketchというデザインツールを使って作成した設計図(ワイヤーフレーム)の一例です。(Sketchはとても使いやすいのでおすすめのデザインツールです。)
とてもシンプルではありますが、最初はこのようにサイトのモックアップを作成するのがいいかもしれません。
余裕がある方は挑戦してみると、サイト制作が捗ること間違い無しです。
WordPressテーマの選択について
ここからのお話は、既にWordpressでドメイン・サーバーの設定を行い、既存テーマを選択したという前提でお話を進めたいと思います。
ちなみに私が選択したのは「IH Business Pro」というテーマ。
とてもシンプルなテーマですね。このテーマを改造しながら、地中海をイメージした雑貨屋のサイトに仕上げていきたいと思います。
テーマに関しては、サイトの構成やコンテンツなどを考慮して選択する必要がありますが、この記事ではサイト制作に関して全く知識がない方を対象としているので、詳しく解説したりはしません。
予めサイトの構成とコンテンツを考えておくことで、テーマを選択する際に、条件を満たすようなテーマを選択すれば、イメージに近いサイトを制作するのはより簡単だと思います。
まあしかし、あまり構成やコンテンツなど、肩肘張って考えてしまうとサイト制作が嫌になってしまうと思うので、「かっこいい」「かわいい」というシンプルな理由でテーマを選択してもOKだと思います。
WordPress管理画面から固定ページを設定する
さてそれでは早速ですが、制作に入っていきましょう。
固定ページとは？
最初に固定ページの設定を行いたいと思います。
「そもそも固定ページって何？」と思われた方も多いと思います。
簡単に説明すると、固定ページとは「会社概要」や「アクセス情報」などのように、投稿を行わないページすべてを指します。
そのため、今回のサイトでは、投稿されたブログが表示される、「ブログ」ページ以外はすべて固定ページにあたります。
固定ページを編集
現状のサイトは至ってシンプル。これがデフォルトの状態です。
既にヘッダーには「お問い合わせ」「サンプルページ」などのリンクが設置されていますが、まずはここのテキストから変更してみましょう。
それではまずWordPressの管理画面に入ります。既にログインしている人は画面上部の「固定ページを編集」というメニューから固定ページの編集画面に移動ができます。
もし管理画面からログアウトしている場合には、
最初に自分で設定したドメインの後ろに
/wp-admin
と入力してください。
そうするとWordPressの管理画面にログインできるかと思います。
WordPressの管理画面へのアクセス方法はもうみなさん覚えましたか？
管理画面にログインできたところで、早速今回の最初のステップ、「固定ページの作成」を行ってみたいと思います。
管理画面の左側に、「固定ページ」というメニューがあると思うので、そこをクリックします。
そうすると、このような画面が表示されます。これが固定ページを管理する場所です。
ここで固定ページの作成・編集・削除などを行うことができるので覚えておいて下さい。
それではまず、デフォルトで幾つか固定ページが設定されているかと思いますので、それらを編集していきたいと思います。
今回は分かりやすくするために、最初にデフォルトで登録されている固定ページを全て削除します。
さて、必要となる固定ページをどんどん作ってみましょう。
今回は、
・トップ
・ブログ
・アクセス
・お問い合わせ
の4つの固定ページが必要となります。
トップページ以外のページ(サブページ)からトップページへと戻るリンクもヘッダーに設置するために、今回は「トップ」というリンクを用意します。
ではまず、メニューの「固定ページ」→「新規追加」から「トップ」という固定ページを作成してみましょう。
はい、このような状態になるかと思います。
トップページの固定ページが作成できたところで、次にパーマリンクを設定しましょう。
固定ページのパーマリンクを設定する
固定ページのページタイトル下に「パーマリンク」という記述があります。
パーマリンクとは、「このドメインを入力するとこの固定ページが表示される。」というものです。
ここでは、http://wp2.entershare.tech/ というドメインを入力するとトップページが表示される仕組みになっています。
今回は「アクセス」ページであれば、
wp2.entershare.tech/access
のように/(スラッシュ)の後ろに固定ページのサブドメインが入るような構造にしたいと思います。
デフォルトではパーマリンクを編集しようとしても、/index.php という部分を削除できないかと思います。
そのため、メニューの「設定」→「パーマリンク設定」からパーマリンクの形式を
✓カスタム構造
をチェックし、入力フォームの中を
/%category%/%postname%
に変更してあげて下さい。
そうすると、
http://wp2.entershare.tech/food/noodle
のようなパーマリンクに再編集することが可能になります。
/%category%
にブログカテゴリーが入り、
/%postname%
には投稿記事タイトルが入ります。
この設定にした場合、固定ページを
http://wp2.entershare.tech/○○ (英語)
の形にすることができるようになります。
トップページでは
http://wp2.entershare.tech/○○
のように /(スラッシュ)以下のドメインを設定する必要がないので、ドメインは
としたいと思います。
そのために、メニュー「設定」→「表示設定」へと進み、
「フロントページの表示」の
✓固定ページ
にチェックをし、
フロントページ : トップ
投稿ページ : ブログ (固定ページ「ブログ」を作成した後で設定)
とすることで、固定ページ「トップ」はトップページと認識され、自然とドメインは
が割り当てられることになります。
アクセスのページが必要なので、「新規追加」から新しく固定ページを作ります。
ページタイトルは「アクセス」。
パーマリンクはデフォルトだと
http://wp2.entershar.jp/アクセス
となっていましたが、日本語URLのままだと404エラーが表示されることがあるのであまりよろしくありません(気になる人は調べてみて下さい)。
なのでパーマリンク横の「編集」ボタンから、
wp2.entershar.jp/access
と英語URLに編集し直してやりましょう。
お問い合わせページも同じように作成し、パーマリンクは
wp2.entershar.jp/contact
としました。
さあ、これで今回必要となる固定ページの設定は完了しました。
一度サイトに戻って状態を確認してみましょう。
するとヘッダーのリンクが設定した固定ページへのリンクに変わっている！！
素晴らしい。
試しにリンクをクリックしてみると…
はい、アクセスのページに移動しましたね。
ちなみにナビゲーションのリンクの順番を変更したい時には、固定ページ編集画面右側の「順序」の数字を左から表示したい順に0から順番に数字を割り振ってあげましょう。すると、ナビゲーションリンクの順番が入れ替わっているはずです。
固定ページの設定はこれで完了です。簡単でしょう？
固定ページはあとでまた追加・削除したり、編集を行うことになるので、早めに慣れておいて下さい。
ページレイアウトの編集
サイトタイトルの変更
固定ページの設定を行い、ヘッダーのリンクが自動で更新されたところで、ついでにサイトのタイトルも変更しておきましょう。
タイトルの変更はどこからできるかというと、ブラウザ上の「カスタマイズ」⇢「Header Settings」→「サイトの基本情報」から編集できます。
・サイトのタイトル ⇢ BONHEUR(ボヌール)
・キャッチフレーズ ⇢ 新宿のイケてる雑貨屋です
に変更し、保存します。
タイトル表示が変わったかと思います。
ちなみに、PhotoshopやIllustratorなどで作成したロゴをサイトアイコンとして使用することもできるので、興味があればやってみて下さい。
アップロードの方法は、同じ画面下の「サイトアイコン」から行うことができます。
画像を挿入する ~メインビジュアルのカスタマイズ~
最初にサイトにアクセスして目にするのがこの「メインビジュアル画像」。
このメインビジュアル画像次第でサイトにアクセスしてきた人に与える印象が変わると言っても過言ではありません。
「百聞は一見に如かず」という言葉の通り、どれだけ文字を羅列しようが、画像の持つ表現力には敵いません。
そのため、メインビジュアルとなる画像の選定は慎重に行いましょう。
・画像サイズが小さすぎて画質が悪い
・あまりいい画像が手元にない
・サイトの雰囲気と画像がマッチしていない
などはサイト制作を行う上ではよくあることです。
メインビジュアルとなり得る画像が手元にない場合は、ネット上のフリー画像からイメージに近いものを探してくるなどの方法もあるので参考しにしてみて下さい。
おすすめフリー画像サイト↓
O-DAN
写真AC
さて、話が若干ずれましたが、メインビジュアルの設定を行っていきましょう。
ブラウザ上部の「カスタマイズ」⇢「Header Settings」→「ヘッダー画像」から、新規画像を追加→選択→保存してやります。
これでメインビジュアル画像が設定できましたね！
今回はメインビジュアルが設定できたここまでにします。
第2回目の次回は
- 固定ページの編集
- フッターの編集
- ブログ記事の投稿
について解説していきたいと思います！
それでは！
最新記事 by tasuku (全て見る)
- みんなで京都・滋賀に出張してきました - 2018年2月15日
- みんなでスノボ&開発合宿をしました - 2018年2月12日
- WordPressでサイトを制作する時の手順(その1) - 2017年11月23日