第16回 その2 -『あったかキッズ』の記事を再現してみよう

先程LOCALでつくったWordPressを使って、既存のサイトを再現してみましょう。

見本サイトのURL : https://attaka-kids.jp/

テーマとプラグインの設定

材料の入手

の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 をクリックしてカスタマイザーを抜ける

5つのカテゴリを作成

投稿 > カテゴリー をひらく

新規カテゴリーを追加 > 名前に 遊ぶ スラッグに play と入力

新規カテゴリーを追加 ボタンをクリックで追加完了

以下、同様に残り4つのカテゴリーを登録する

  • 名前:暮らす
  • スラッグ:live
  • 名前:学ぶ
  • スラッグ:learn
  • 名前:働く
  • スラッグ:work
  • 名前:その他
  • スラッグ:other

フッターウィジェットを設定

  • 外観 > ウィジェット をひらく
  • ダミーが挿入されているので削除する
    • フッター1、フッター2のクリックして右端の三点ドットのメニューからブロックを削除
  • フッター1の下部、マークをクリックして検索窓に 最近の投稿 と検索、表示されたウィジェットをクリックして挿入
  • 右ペインの 項目数5 になっているのを確認(最近の記事5件が表示される)
  • 同様に以下のウィジェットを挿入する

フッター1

  • 検索

フッター2

  • 見出し
    • カテゴリーでさがす
  • カテゴリー
    • 投稿数を表示/階層を表示にチェックを入れる
  • 見出し
    • 投稿日でさがす
  • カレンダー

右上の 更新 ボタンで保存

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x