初めてのワードプレス(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回)以降は、写真ブログを作成する際の豆知識や、写真の盗用対策(プラグインおよびサーバーの設定)について掲載していきます。


◆初めてのワードプレス(全20回)目次

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選

15)画像の直リンク禁止と自動コピーサイト作成阻止法(.htaccessで出来る盗用対策)
16)検索に表示したくない画像がある場合の対処法(robots.txtの作成と設置方法)

17)検索エンジンに登録する方法(XMLサイトマップとGoogle Search Console活用法)
18)入れておくといい基本的プラグイン20選

19)圧縮とキャッシュの設定、ログイン画面にアクセス制限をする(.htaccessで出来るSEOとセキュリティ対策)

20)今後の注意点6選(更新・PHPバージョン・バックアップ・パーミッション変更・WordPressの基本形・データベース接続確立エラー)

 

◆番外編(画像4600枚超える写真ブログ、10年目の試行錯誤)

写真ブログの画像だけMixHostから別サーバー(スターサーバー)に移してみました(2017/9/5)

スターサーバーで無料の独自SSLを設定した手順(ネットオウル提供のサブドメインでも可能)(2017/9/5)

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

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

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

 

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

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

 

にほんブログ村 写真ブログ 地域の歴史文化写真へ にほんブログ村

滋賀県ランキング



コメントを残す

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

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