初めてのワードプレス(12)固定ページの作り方/レイアウト/メニュー表示(問い合わせページを例に)

竹林の中を走る電車
写真:「堅田で過ごす夏」(2010年8月掲載)より、
おごと温泉駅付近「竹林の中を走る電車(車内から)」

 

問い合わせページを例に、WordPressでの固定ページの作り方、レイアウト、メニュー表示まで、一連の流れをまとめてみました。

第7回でご紹介した高機能プラグインJetpackを使って問い合わせフォームを設置しています。レイアウトの仕方やメニュー表示はどのテーマ・プラグインを使っても共通なので、イメージをつかむご参考になれば幸いです。

 

目次
1.固定ページの作り方(編集)
2.固定ページのレイアウト(属性)
3.メニュー表示の設定

 

1.固定ページの作り方(編集)

1. 管理画面で「固定ページ」→「新規追加」

wp-kotei-1

2. 例:タイトルを「お問い合わせ」、リンクをcontact、本文に「お問い合わせはこちらからお願いします」等と記入し、「お問い合わせフォームを追加」(Jetpackの場合)

wp-kotei-2

3. 問い合わせフォームから連絡があった場合のメールの設定

  • メールのタイトル(お問い合わせ/サイト名等)
  • メールの送信先(未記入の場合はWordPress登録時のメールアドレスへ届く)
  • 項目(名前・メールアドレス・内容等)

Jetpackのバージョンおよび初回設定かどうかで、画面が異なることがあります。設定する項目は同じです。

wp-kotei-3

※必須項目に選択を入れておくと、その項目に記入がない限り送信されません。

※海外からのスパム対策:「チェックボックス」を作って「チェックを入れて送信して下さい」と書いておくと、海外からの変な広告をある程度防ぐことができます。

wp-kotei-4

保存後に「テキスト」モードで見ると、下記のようなcontact-formのソースコードが記載されているはずです。(実際は[ ]が使用されていますが、表記の関係上<>で表しています。)

<contact-form> ***(省略)*** </contact-form>

 

これだけだと実際に見たとき無地でさみしいので、枠をつけてみます。contact-formのソースコードの前後に下記のように<div style></div>を追加すると、薄い灰色の線で枠がつきます。

 

<div style=”border: solid 2px lightgray; padding: 30px 20px 30px 30px;”>

<contact-form> ***(省略)*** </contact-form>

</div>

 

こんな風に表示されます。

 

2.固定ページのレイアウト(属性)

wp-kotei-5

  • 親・・・固定ページ間で階層構造をとる・とらないが選べます。
  • テンプレート・・・全幅表示等に変更できます(注:テーマによって異なります)。
  • 順序・・・メニュー表示で表示される順番(項目3.で解説)

 

◆「親」に他の固定ページを指定した場合:親ページを主とする階層構造になる。

wp-kotei-6

 

◆テンプレート:全幅、サイドバーなし等を選択できる(注:テーマにより異なる)

例1:ブログタイプのテーマ(first)の場合

wp-kotei-7

 

例2:ホームページタイプのテーマ(Sydney)の場合

wp-kotei-8

 

3.メニュー表示の設定

1. 外観→カスタマイズ

wp-kotei-9

2. メニュー

wp-kotei-10

3. 「項目を追加」で固定ページ等を追加

  • カスタムリンク・・・外部ページを追加可能
  • 投稿・・・ブログ記事の「お知らせ」ページ等を追加可能
  • 表示位置・・・サイト上部にメニュー表示可能(表示名はテーマにより異なる)

例1:当ブログの場合

wp-kotei-11

wp-kotei-12

 

例2:テーマ「STINGER PLUS」の場合

wp-kotei-13

wp-kotei-14

 


次回(第13回)以降は、写真ブログを作成する際の豆知識や、写真の盗用対策(プラグインおよびサーバーの設定)について掲載していきます。


◆初めてのワードプレス目次

初めてのワードプレス(1)独自ドメイン取得
初めてのワードプレス(2)レンタルサーバーの選び方(必要な条件やスペックを考えてみた)

初めてのワードプレス(3)サーバーを借りた後、何をどうすればいいか(手順)
初めてのワードプレス(4)WordPressをインストールする

初めてのワードプレス(5)Edit Author Slugでユーザー名を非表示にする
初めてのワードプレス(6)メンテナンス中表示にするComing Soon Page & Maintenance Mode by SeedProd

初めてのワードプレス(7)高機能プラグインJetpackの設定方法
初めてのワードプレス(8)Akismet Anti-Spamの設定とAPIキー取得方法

初めてのワードプレス(9)ワードプレスの設定とテーマの変更・カスタマイズ
初めてのワードプレス(10).htaccess/TeraPad/FTPソフト

初めてのワードプレス(11)WordPressをドメイン直下に表示する方法
初めてのワードプレス(12)固定ページの作り方/レイアウト/メニュー表示(問い合わせページを例に)(今回)

初めてのワードプレス(13)WordPressを使った写真ブログの作り方
初めてのワードプレス(14)訪問者に配慮しつつ画像文章の盗用対策になるプラグイン3選

 

番外編
10年続く写真ブログ、サーバーをファイアバードからmixhostへお試し移転中です(2017/6/30)

写真サイトに使えそうな新しい独自ドメインが次々登場~.camera.photoから.studioまで(2017/7/3)

レンタルサーバーの話(2017年夏):ロリポップ!無料独自SSL対応、エックスサーバーSSD採用、そしてスターサーバー統合(2017/8/11)

 

◆無料ブログからワードプレスへの移転(無料ブログ側の設定)

無料ブログからWordPressへの確実な引越し~リダイレクトできない無料ブログで行った3つのこと

 



コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)