先程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」の初期設定をおこなう
以下の画面どおりにラジオボタン、チェックボックスを選択する
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 をクリックしてカスタマイザーを抜ける
5つのカテゴリを作成
投稿 > カテゴリー をひらく
新規カテゴリーを追加 > 名前に 遊ぶ スラッグに play と入力
新規カテゴリーを追加 ボタンをクリックで追加完了
以下、同様に残り4つのカテゴリーを登録する
- 名前:暮らす
- スラッグ:live
- 名前:学ぶ
- スラッグ:learn
- 名前:働く
- スラッグ:work
- 名前:その他
- スラッグ:other
フッターウィジェットを設定
- 外観 > ウィジェット をひらく
- ダミーが挿入されているので削除する
- フッター1、フッター2のクリックして右端の三点ドットのメニューからブロックを削除
- フッター1の下部、+マークをクリックして検索窓に 最近の投稿 と検索、表示されたウィジェットをクリックして挿入
- 右ペインの 項目数 が 5 になっているのを確認(最近の記事5件が表示される)
- 同様に以下のウィジェットを挿入する
フッター1
- 検索
フッター2
- 見出し
- カテゴリーでさがす
- カテゴリー
- 投稿数を表示/階層を表示にチェックを入れる
- 見出し
- 投稿日でさがす
- カレンダー
右上の 更新 ボタンで保存