【WordPress】5日で簡単オリジナルサイトの作成(3日目)

Pocket

STEP3では、固定ページとメニューを作成します。

固定ページは、ブログを投稿するページとは別の場所に作成することができます。例えば、会社のサイトを作成する場合は会社概要・規約・サイトマップなど更新が少ないページは固定ページとして向いています。
サンプルサイトでは、下記の6つのタイトルの固定ページを作成しています。

  • HOME・・・サイトの概要
  • GALLARY・・・写真ギャラリー
  • SCHOOL・・・学校のコースの詳細案内
  • PROFILE・・・Heteml Kabaoのプロフィール紹介
  • NEWS・・・投稿(ブログ)
  • CONTACT ME・・・問い合わせフォーム

 

step3top

[1]ページの作成

固定ページはメニュー固定ページ新規追加で作成が可能です。
※以下では、【SCHOOL】というページタイトルで固定ページを作成しています。

page4

 


 

[2]リンク先の設定

本文の 詳しくはコチラ の部分に、STEP1 で作成したブログ記事の写真教室の記事のリンク先を設定します。
リンク先:写真教室 http://blog.heteml.jp/samplesite/information

詳しくはコチラの部分を選択の上、リンクの挿入/編集のボタンを押すと、リンクの挿入/編集画面が開きます。
『または既存のコンテンツにリンク』をクリックして、写真教室 の記事を選択すると、自動的にリンク先とタイトルが入力されます。

stepc3-6

 

『リンクを新ウィンドウまたはタブで開く』にチェックを入れておくと、クリックした際にリンク先のページがブラウザの新しいウィンドウやタブでページが表示されます。
※自分のサイト以外へリンクしたい場合は、URLとタイトルを直接入力して「リンク追加」ボタンを押します。

link2

 

詳しくはコチラに写真教室の記事のリンクがつきました。リンク部分にポインターを置くと、タイトルに入力した内容も表示されます。
「プレビュー」ボタンで内容を確認し、問題がなければ「公開」ボタンを押します。

stepc4-1

 

『固定ページを表示する』をクリックします。

stepc7-1

 

公開したページが表示されるので、メニューに固定ページで作成したページのタイトルが表示されているか確認します。

stepc2-3

 


 

[3]コメント欄の削除

コメントを残せるようになっているので、コメント欄が表示されないように設定します。 メニューの固定ページ一覧で【SCHOOL】の編集ページを開き画面右上の「表示オプション」をクリックします。

stepc8-3

 

『表示する項目』が出てきますので、『ディスカッション』にチェックを入れます。

stepc8-4

 

ページの一番下に、『コメントの投稿を許可する。』と『このページで トラックバックとピンバックを許可する。』を選択する項目が出ますので、両方のチェックをはずし、「更新」ボタンで確定します。

stepc8-10

 

コメント欄が非表示となったか確認します。

stepc9-1

 


 

[4]写真の挿入

【SCHOOL】のページと同様に、メニュー固定ページ新規追加で【PROFILE】ページを作成し、「メディアを追加」ボタンから写真をページに挿入します。

stepc10-3

 

「ファイルを選択」ボタンを押し、パソコンの画像を保存しているフォルダから挿入する画像を選択します。「開く」ボタンで押すと『メディアを挿入』画面へ遷移します。

stepc11-4

 

挿入する画像を選択後、「固定ページに挿入」ボタンで確定します。

stepc12-2

 

本文に画像が追加されました。文字の位置の調節は、挿入された画像をクリックすると表示される「画像を編集」ボタンを押すと可能です。

stepc14-1

 

今回は、画像の左側に文字を表示させるため『左』にチェックを入れて「更新」ボタンで確定します。

stepc14-8

 


 

[5]ギャラリーの作成

【SCHOOL】のページと同様にメニュー固定ページ新規追加で【GALLARY】ページを作成し、「メディアを追加」ボタンを押します。表示された『メディアを挿入』画面で、『ギャラリーを作成』を選択してから『ファイルをアップロード』をクリックし、パソコンの画像を保存しているフォルダから挿入する画像を選択しアップロードします。

stepc15-1

 

アップロードした写真にチェックが入ったままの状態で、「ギャラリーを作成」ボタンを押します。

stepc16-1

 

表示された『ギャラリーを編集』画面で、各写真にタイトルや説明等を設定します。選択しているファイルの詳細が画面右側に表示され、タイトルなど編集する事が可能です。

stepc17-3

タイトル
入力必須ですので、何も入力しないと画像にあるような英数字のファイル名がタイトルとなります。タイトルに入力した内容は、画像にマウスポインタを合わせた際に表示されます。
キャプション
画像の直後に画像の説明文を表示します。
代替テキスト
画像が表示されないときに表示されるテキストを設定します。
説明
管理者用の画像の説明文ですので、サイトには表示されません。

 

写真を表示させるカラム数を選択します。今回は、2列で表示されるように2カラムを選択し、「ギャラリーを挿入」ボタンで確定します。

stepc18-4

 

ギャラリーを挿入すると、本文の部分にカメラの画像が表示されます。画面右上の「表示オプション」でコメント欄が表示されないよう設定後、「公開」ボタンを押します。

stepc19-3

 

GALLARY】ページが公開されました。

stepc20-1

 

その他、固定ページとしてサイトマップとなる【HOME】と、タイトルのみの固定ページ【CONTACT ME】 【NEWS】ページの3つを作成し公開しておきます。

stepc22-3

 


 

[Tips]サンプルページの削除

WordPressのサンプルページは、固定ページ一覧で『ゴミ箱』をクリックして削除するか、
『編集』でタイトルと本文を書き換えて別の固定ページにすることで、表示させないようにできます。

stepc21-1

 

大分サイトらしくなってきました。STEP4では、固定ページの並べ替えを行います。

 

 

hetemlkabaoindex3

 

Pocket