WordPress セミナー 本サイト構築 順 1. 基本の設定 1-1 テーマの変更 [ 外観 ] [ テーマ ] テーマを追加画 にてLightningを検索 Lightningをインストールする [ 有効化 ] ボタンをクリックし有効化する Lightning 推奨プラグイン VK All in One Expansion Unit をインストールする プラグイン 覧にて VK All in One Expansion Unit の [ 有効化 ] ボタンをクリックし有効化する 1-2 基本設定を う [ 設定 ] [ 般 ] メールアドレス : 分のアドレスに変更 [ 変更を保存 ] ボタンをクリックし保存する [ 表 設定 ] 検索エンジンでの表 :ON サイトを公開する時に OFF にします [ 変更を保存 ] ボタンをクリックし保存する 1
[ ディスカッション設定 ] 投稿のデフォルト設定 : 新しい投稿へのコメントを許可する チェック無 [ 変更を保存 ] ボタンをクリックし保存する [ パーマリンク設定 ] 共通設定 : 投稿名に設定 [ 変更を保存 ] ボタンをクリックし保存する 1-3 VK EXUnit プラグインの設定 [VK EXUnit] VK All in One Expansion Unit 有効化設定 [ 有効化 ] チェックボックスの ON /OFF 設定 Bootstrap の CSS(grid/button/table のみ ) を出 fontawesome link タグを出 ファビコン設定 タイトルタグの書き換え メタキーワードを出 メタディスクリプションタグを出 ソーシャルメディア連携 Google Analytics ウィジェット CSS カスタマイズ 2
ページの 覧表 先祖階層からの ページリスト表 お問い合わせ HTMLサイトマップの表 Call To Action 広告の挿 関連記事を表 アイキャッチ画像 動挿 TinyMCE スタイルタグ管理バーメニューカスタム投稿タイプマネージャー [ 変更を保存 ] ボタンをクリックし保存する [ メイン設定 ] [Google Analytics 設定 ] Google アナリティクスの ID を [ お問い合わせ ] メッセージお気軽にお問い合わせください 電話番号 0467-38-5953 営業時間受付時間 9:00-18:00 [ 祝 除く ] お問い合わせ先 URL /contact/ お問い合わせボタンに表 するテキストお問い合わせ お問い合わせボタンに表 するテキスト 2( オプション ) 空欄 お問い合わせボタンウィジェットに表 するテキストお問合せ [ 変更を保存 ] ボタンをクリックし保存する 3
1-4 外観のカスタマイズ [ カスタマイズ ] [ サイト基本情報 ] サイトのタイトル WordPress セミナー 本サイト キャッチフレーズ空 でも可 ( このデザインでは使 しない ) サイトアイコン favicon.png 指定する [ 変更を保存 ] ボタンをクリックして保存する [Lightning デザイン設定 ] ヘッダーロゴ画像 logo.png を指定する キーカラー :#660000 キーカラー ( 暗 ):#961e00 [ 変更を保存 ] ボタンをクリックして保存する [Lightning トップページスライドショー ] スライド切り替え間隔の設定 5000 ミリ秒 (5 秒 ) に変更する [1] スライド画像 slide-1.png を指定する [2] スライド画像 slide-2.png を指定する [3] スライド画像 slide-3.png を指定する 各スライドの スライド画像の代替テキスト スライド画像リンク先 URL スライドタイトル ( 任意 ) スライドテキスト ( 任意 ) ボタンの 字 ( 任意 ) は空欄にする モバイル スライド画像 は 不要です 4
2. ページ登録 WordPress には ブログ と ウェブページ の 2 種類のページを作成する機能があります [ 投稿 ] メニュー : ブログ [ 固定ページ ] メニュー : ウェブページ ブログと固定ページの本 を 編集するために 標準で装備されているエディターソフトの TinyMCE を使 します このエディターは ワープロソフトのように 字の きさや を設定する機能が 意されており HTML の知識がなくてもページの装飾ができます 2-1 ブログカテゴリーの作成 [ 投稿 ] [ カテゴリー ] 既存のカテゴリ 未分類 を編集 [ 名前 ]: ブログ [ スラッグ ]:blog [ 更新 ] ボタンをクリックし保存する 新規カテゴリーを追加 インテリア [ 名前 ]: インテリア [ スラッグ ]:interior [ 新規カテゴリを追加 ] ボタンをクリックし保存する 5
2-2 ブログページ作成 [ 投稿 ] [ 新規追加 ] タイトル 本 の 本 の モードは ビジュアル タブをクリックし ビジュアルモードに切り替える タイトルと本 には 投稿素材 ページのテキストをコピー & ペーストする 出しの設定 本 の キッチンカウンター を選択する 段落設定の をクリック 表 される 出し 覧から 出し 2 を選択する 選択したテキストが 出し 2(h2 タグ ) に設定されます 画像挿 <1 枚 > 記事本 の最初 性 の前にカーソルを置く [ メディアを追加 ] ボタン :cafe.jpg を指定 [ 代替テキスト ]: カフェ インテリア [ 配置 ]: 中央 [ リンク先 ]: なし [ サイズ ]: フルサイズ [ 投稿に挿 ] ボタンをクリックする <2 枚 > 記事本 の カフェ の前にカーソルを置く [ メディアを追加 ] ボタン :counter.jpg を指定 [ 代替テキスト ]: カフェ インテリアキッチンカウンターの写真 [ 配置 ]: 左 [ リンク先 ]: なし [ サイズ ]: 中 -223 x 300 [ 投稿に挿 ] ボタンをクリックする 6
カテゴリー [ インテリア ] を選択 アイキャッチ画像 [ アイキャッチ設定 ] ボタンをクリック メディアライブラリより cafe.jpg を選択し [ アイキャッチ画像を設定 ] ボタンをクリックする 投稿 の編集 [ すぐに公開する編集 ] で投稿 投稿時間を変更できる 必要に応じて変更する 公開 [ 公開前に 下書き保存 ボタンをクリックし下書き保存する プレビュー ボタンをクリックし表 状態を確認する パーマリンクの編集 [ 編集 ] ボタンをクリック フォームに cafe と し [OK] ボタンをクリックし保存する パーマリンクの編集 [ 編集 ] ボタンをクリック フォームに cafe と し [OK] ボタンをクリックし保存する [ 公開 ] ボタンをクリックし公開する 7
2-3 ウェブページ作成 [ 固定ページ ] [ 新規追加 ] タイトル 本 の 本 の モードは ビジュアル タブをクリックし ビジュアルモードに切り替える タイトルと本 には ページ素材 ページのテキストをコピー & ペーストする 出しの設定 本 の 運営会社 を選択する 段落設定の をクリック 表 される 出し 覧から 出し 2 を選択する 選択したテキストが 出し 2(h2 タグ ) に設定されます リスト表 記事本 の 社名 の前にカーソルを置く [ 番号なしリスト ] ボタンをクリック 社名の前に 丸がつきます 以下 各項 の先頭にカーソルを合わせ enter キーをおす 抜粋欄を [ 表 オプション ] をクリックしてから [ 抜粋 ] のチェックボックスを ON にする SEO 効果を める description の設定 固定ページの属性 固定ページの属性親 : 親なし を指定テンプレート : デフォルト 8
公開 の編集 [ すぐに公開する編集 ] で公開 公開時間を変更できる 必要に応じて変更する 公開 公開前に 下書き保存 ボタンをクリックし下書き保存する プレビュー ボタンをクリックし表 状態を確認する パーマリンクの編集 [ 編集 ] ボタンをクリック フォームに site-profile と [OK] ボタンをクリックし保存する [ 公開 ] ボタンをクリックし公開する 2-4 ホームページ設定 [ 外観 ] ー [ カスタマイズ ] [ ホームページ設定 ] フロントページの表 最新の投稿 を選択 [ 変更を保存 ] ボタンをクリックする 9
3. メニュー作成 3-1 ヘッダーメニュー作成 [ 外観 ] ー [ カスタマイズ ] [ メニュー ] [ メニューを新規作成 ] ボタンをクリック 表 された メニュー名 フォーム に Header と メニューの位置 を Header Navigation を選択 [ 次へ ] ボタンをクリックする [ 項 を追加 ] ボタンをクリック 現在公開中の固定ページ名が表 されます ホーム と このサイトについて をクリック 2 項 がメニューに追加されます 10
[ カテゴリー ] ボタンをクリック 現在公開中のカテゴリー名が表 されます ブログ と インテリア をクリック 2 項 がメニューに追加されます 並び替え をクリック 表 されたメニュー項 横の上下左右 印キーを使い表 順を編集します [ 完了 ] ボタンをクリックします [ 公開 ] ボタンをクリックし保存します 11
3-2 フッターメニュー作成 [ 外観 ] ー [ カスタマイズ ] [ メニュー ] [ メニューを新規作成 ] ボタンをクリック 表 された メニュー名 フォーム に Footer と メニューの位置 を Footer Navigation を選択 [ 次へ ] ボタンをクリックする [ 項 を追加 ] ボタンをクリック 現在公開中の固定ページ名が表 されます このサイトについて をクリック 項 がメニューに追加されます ヘッダーメニューと同様に [ カテゴリー ] から インテリア と ブログ を選択 [ 公開 ] ボタンをクリックします 12
4. ウィジェット作成 4-1. サイドナビゲーションの設定 [ 外観 ] ー [ カスタマイズ ] [ ウィジェット ] サイドバー ( トップページ ) トップページのみ表 させる項 を設定 VK_ 最新記事 アーカイブ カテゴリー VK_ お問い合わせボタン サイドバー ( 共通上部 ) トップページ 固定ページ 投稿ページに共通して表 させる項 を設定 検索 サイドバー ( 投稿 ) 投稿ページを表 させるとメニューが表 されます 投稿ページのみ表 させる項 を設定 VK_ 最新記事 アーカイブ カテゴリー サイドバー ( 固定ページ ) 固定ページを表 させるとメニューが表 されます 固定ページのみ表 させる項 を設定 VK_ ページのリスト VK_ 最新記事 カテゴリー [ 公開 ] ボタンをクリックします 13
5. トップページ PR Block の設定 5-1. Lightning トップページ PR Block の設定 [ 外観 ] ー [ カスタマイズ ] [Lightning トップページ PR Block] この PR Block を表 する ON( ) にする 各項 を設定する アイコン1:fa-leaf タイトル1: 私のDaily Interior サブテキスト1: 々の暮らしを豊かに楽しく暮らしたい そんな私のインテリアへの思いを書いています リンクURL1:/category/interior/ アイコン2:fa-bicycle タイトル2: 湘南暮らしサブテキスト2: 茅ヶ崎は 転 のまち ママチャリでブラブラしながら つけた なにげない 々の暮らしのブログです リンクURL2:/category/blog/ アイコン3:fa-wordpress タイトル3: このサイトについてサブテキスト3:WordPressを使いホームページを実際に作り上げるセミナー WordPressホームページ構築実践講座 の作成 本サイトです リンクURL3:/site-profile/ [ 公開 ] ボタンをクリックします 14