情報デザイン演習I 14. WordPressによるサイトの制作2 コンテンツ制作
目次
スライド
今日なし
最終課題
Wordpress を使って自由にホームページを作成してみよう。
条件
- 子テーマを作成すること
- 固定ページと投稿ページがあること
テーマに関する注意
FSE対応のテーマはお勧めしません。(まだ情報もあまりないし…混乱してそう…)
テーマを有効化した時に、外観-メニューがなければFSE対応テーマとなります。
締め切り
1/5 13:00
提出方法
QuickTime Playerの画面収録機能を使って、説明音声入りで録画してNASに提出
nas1-mc.thu.ac.jp - 2023演習 - 情報デザイン演習II - 15回
に学籍番号.mp4として提出
録画方法がよくわからない人は以下を参考にしてください。(Winの人も)
最終課題ヒント
全くどうして良いか分かりません、という人向けにヒントを記載していきます。
MAMP?Local?
本演習では最初にMAMPにてwordpressをインストールしましたが、これはwordpressに
- データベースサーバ
- Webサーバ
が必要なことを認識してほしいからです。 そこを理解していれば、その後は簡単にローカル上(自分のコンピュータ上)で簡単にwordpressのシステムを構築できるLocalの方が簡単なので、Localを使っていきましょう。
- MAMPインストール(DBサーバ・Webサーバの構築)
- wordpressのダウンロード
- webサーバにwordpressを設置
- DBサーバにwordpress用のデータベース(入れ物)を作成
- wordpressの初期設定・インストール
これらの作業がLocalではほぼ自動で行われます。
サイトの設計
サイトは階層構造を明確にしないと構築できません。 ですので、まずは階層構造の設計をしましょう。
例えば、
- TOPページ
- Aboutページ(固定ページにて実装)
- カテゴリー1ページ(投稿にて実装)
- カテゴリー2ページ(投稿にて実装)
ポートフォリオサイトであれば
- カテゴリー1：グラフィック作品
- カテゴリー2：映像作品
お店のメニューであれば
- カテゴリー1：Foodメニュー
- カテゴリー2：Drinkメニュー
等となります。
なお、トップページはデフォルトでは最新の投稿が表示されます。 トップページはカスタマイズできるので、その場合にはトップページに何を掲載するかを考えましょう。
素材の準備
文章や画像を準備しておきましょう。
画像サイズなどは推奨のものが設定されているものもあります(ヘッダー画像等)
Web用であれば、横1000pxもあれば十分なので、それより大きいのものはPhotoshopで小さくしておきましょう。 jpg,png,gif,webp,svg形式以外は表示できません。
映像はYouTubeに限定公開などでアップしておくと良いでしょう。
テーマの選定
- FSE対応テーマはやめておきましょう。
- 有料のテーマもあるので気をつけましょう
- 日本語対応をうたっているものだと、カスタマイズのマニュアルが充実していたりします。
テーマによってできることが変わります。
- 適当にインストールして有効化して使いやすそうか調べましょう。
FSE対応かどうかは、外観に「メニューの項目があるかどうか」でわかります。
ここでは
を利用しようと思います。テーマ改造などの記事がそこそこ充実しているからです。 もちろん、他のテーマでも構いません。
テーマの設定・子テーマの設定
テーマによっては管理画面からそのままインストールできるものもありますが、zipファイル形式でダウンロードしたものをアップロードするものもあります。
子テーマが用意されていない場合は、前回の資料を元に子テーマを作成しましょう。
Simplicity2では親テーマ・子テーマとも用意されていますので、これらをアップロードし、「Simplicity2 Child」を有効化します。
最初の設定
見た目ではなく設計通りに階層構造を作ってしまいましょう。 そのためには、メニューに追加する
- 固定ページ
- カテゴリ
を作成する必要があります。
固定ページの準備
必要なページを新規作成しましょう。
トップページを最新の投稿以外にする場合にはそれも作成しておきます。 その後、設定-表示設定から、ホームページの設定で、該当固定ページを選択します。
投稿-カテゴリの準備
カテゴリーを新規作成しましょう。スラッグは英数字とハイフンのみで半角で指定しましょう。
外観-メニュー
メインメニューは必ず作成、必要があればフッターメニューなども作成しましょう。 テーマによって指定できるチェックボックスのリストが変わります。
メニューに追加したい項目を「メニュー項目を追加」から追加していきましょう。
外観-カスタマイズ
この項目も、テーマによってできることが非常に変わります。
ヘッダーやフッターはここを中心にカスタマイズしましょう。
ウィジェット(必要に応じて)
左にパーツ、右にウィジェットを置ける場所が設定されています。 プレビューを見ながら設定していきましょう。
style.css
カスタマイズで設定できないところをstyle.cssに追記していきましょう。