ウェブサイト「サンプル001」の紹介

実際にウェブサイトを構築しながらWordPressを学んでいただくシリーズです。

今回は、ウェブサイト「サンプル001」にどのような機能があるのか紹介します。

実際のサイトは、https://sample001.wp-ch.jp からご確認いただけます。

サンプル001の特長

このサンプル001は、縦長１ページのウェブサイトです。従って、他ページへの遷移はありません。
また、WordPressによるウェブサイト構築のサンプルとして作成されたさいとですので、レスポンシブにも対応していません。

WordPressでは、Gutenberg（グーテンベルク）ブロックエディタで固定ページを編集しています。

サンプルサイトに掲載している内容は、フリー画像およびAIによって生成したダミーテキストによるものです。

左側にサイトロゴ、右側にメニューのよくあるヘッダー構成です。

WordPressの管理画面から登録した画像をスライダーに表示します。
画像の上には、キャッチコピーを表示します。

スライダーには jQueryプラグイン FlexSlider を使用しています。

固定ページのエディタに入力した内容をそのまま表示しています。
表示する際、CSSによってデザインを適用しています。

カスタム投稿で登録したチームのメンバー情報を表示しています。

Smart Custom Fields で登録したスキル情報をCSSでグラフ化して表示しています。

固定ページのエディタに入力した内容をそのまま表示しています。
表示する際、CSSによってデザインを適用しています。

Smart Custom Fields で登録したクライアント情報を表示を FlexSlider でスライド表示しています。

カスタム投稿に登録した画像を表示しています。
また、FancyBox を使用して、クリック時に画像を拡大表示できるようにしています。

Contact F orm 7 プラグインを使用し、お問い合わせフォームを設けています。

4列レイアウトに「連絡先」「SNS一覧」「電話番号」「メールアドレス」を表示しています。

このサンプル001では、以下のプラグインを使用しています。

プラグイン名	用途
Admin Columns	管理画面の一覧に表示する列をカスタマイズします
Advanced Custom Fields	編集エディタに任意の項目を追加します
Autoptimize	CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化します
Contact F orm 7	お問い合わせフォームを作成します
EWWW Image Optimizer	画像を圧縮することでサイトの応答を高速化します
FileBird Lite	画像などのメディアファイルを整理する
Font Awesome	編集エディタでFont Awesomeのアイコンを使用可能にします
Smart Custom Fields	編集エディタに繰り返し項目を追加します
W3 Total Cache	キャッシュを有効にしサイトの応答を高速化します
WP Mail SMTP	メール送信の為にSMTPサーバーを設定します
WP Multibyte Patch	WordPressで日本語などのマルチバイト文字における不具合を修正します
WP-Optimize	WordPressで使用するデータベースを最適化することでサイトの応答を高速化します

このウェブサイトでは、

を使用しています。

各jQueryプラグインをCDN経由で読み込み、ウェブサイトに適用する方法を紹介しています。

WordPressでは、標準で１つの「投稿」が用意されています。
このウェブサイトでは、WordPressをカスタマイズして「スライダー」「メンバー」「ポートフォリオ」の３つのカスタム投稿を追加しています。
カスタム投稿の作り方、カスタム投稿に登録した情報の出力方法などを紹介しています。

ACFは、WordPressでウェブサイトを作成する際に、多く使われるプラグインです。
固定ページや投稿に任意の項目を追加することができます。

このウェブサイトでは、ACFの使い方を紹介しています。

このウェブサイトでは、WordPressのプラグイン「Contact F orm 7」を使用して、お問い合わせフォームを設置しています。

お問い合わせフォームの作り方、カスタマイズ方法および「WP Mail SMTP」プラグインを使用した控えメール、自動返信メールの送信方法についても紹介しています。

今回は、ウェブサイト「サンプル001」https://sample001.wp-ch.jp の内容について紹介しました。

次回から、このウェブサイトの作り方を１から順次紹介していきます。