先程LOCALでつくったWordPressを使って、既存のサイトを再現してみましょう。
見本サイトのURL : https://attaka-kids.jp/
Contents
テーマとプラグインの設定
材料の入手
の2ファイルをダウンロードする。
attaka.zipはテーマファイルなので解凍はせずそのまま。
attaka-kids_files.zipは原稿なので解凍して使います。
attaka-kids_files.zipを解凍するとフォルダの中に以下のファイルとフォルダができる
- article.txt – 文字原稿
- images – 写真素材
- link.txt – リンクURL一覧
- ajax_load_more.txt – プラグインの設定ファイル
テーマファイルをアップロード
外観 > 新規追加＞テーマのアップロードから先ほど落とした「attaka.zip」を選び「今すぐインストール」を押す
テーマ「Twenty Twenty」の子テーマとして作成してありますので、同テーマも必要です。
プラグインのインストールが終了すると以下の画面になります。画面が変わるまで少し時間がかかることがあります。
必要なプラグインをインストール
- Ajax Load More
「Ajax Load More」の初期設定をおこなう
ダッシュボード内の 「Ajax Load More」 の設定画面を開く
以下の画面どおりにラジオボタン、チェックボックスを選択する
Button Classes の欄に post-wrapper msnry と入力
※自動保存されますので「保存」ボタンはありません
Ajax Load More 用のテンプレートを設定
ダウンロード＆解凍した attaka-kids_files フォルダ > ajax_load_more.txt をダブルクリックして開く
表示された内容をすべて選択してコピー
Ajax Load More > Repeater Templates を開く
Template Code: の枠に表示されている内容をすべて選択し、コピーしておいたコードをペーストして上書きする
Save Template ボタンをクリックして保存完了
ロゴをアップロード
外観 > カスタマイズ を開く
サイト基本情報 を開く
ロゴを選択 をクリック
ファイルをアップロード タブを選択
ファイルを選択 をクリック
ダウンロード&解凍した attaka-kids_filesフォルダ > 画像フォルダ内の logo-attakakids-s.png を選択
選択 をクリック
切り抜かない をクリック
公開 ボタンをクリックして保存（反映）
背景色を「白」に設定
一つ手前の画面に戻り、色 をクリック（外観 > カスタマイズ > 色）
背景色 の 色を選択 をクリックして、右端のバーを一番下まで下げる→ 白色になる
左上の x をクリックしてカスタマイザーを抜ける
５つのカテゴリを作成
投稿 > カテゴリー をひらく
新規カテゴリーを追加 > 名前に 遊ぶ スラッグに play と入力
新規カテゴリーを追加 ボタンをクリックで追加完了
以下、同様に残り４つのカテゴリーを登録する
- 名前：暮らす
- スラッグ：live
- 名前：学ぶ
- スラッグ：learn
- 名前：働く
- スラッグ：work
- 名前：その他
- スラッグ：other
フッターウィジェットを設定
- 外観 > ウィジェット をひらく
- ダミーが挿入されているので削除する
- フッター１、フッター２のクリックして右端の三点ドットのメニューからブロックを削除
- フッター１の下部、＋マークをクリックして検索窓に 最近の投稿 と検索、表示されたウィジェットをクリックして挿入
- 右ペインの 項目数 が 5 になっているのを確認（最近の記事５件が表示される）
- 同様に以下のウィジェットを挿入する
フッター１
- 検索
フッター２
- 見出し
- カテゴリーでさがす
- カテゴリー
- 投稿数を表示／階層を表示にチェックを入れる
- 見出し
- 投稿日でさがす
- カレンダー
右上の 更新 ボタンで保存