第３回 WordPress の基本操作
情報デザイン演習IIIA/2020｜情報デザイン専攻｜2020.10.01｜遠隔
情報共有シート｜プロジェクト一覧｜学科サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - 本演習におけるコアツールとなる WordPress の基本操作について、前回に引き続き説明します。
- 演習のテーマ「私のアナザースカイ」について、現状分析（先行事例の調査）を行って、学科サイトリストアップして下さい。
- 先行事例が抱える「問題」を見出して、学科サイトに記載して下さい。
- 学科サイトのページに本日の成果報告を記載して下さい。
学科サイト（受講生一覧）
以下、LIVE動画をご覧下さい。記事に沿って解説しています。
本日のメニュー
WordPress の基本操作
サイトの管理
サイトの管理は「ダッシュボード」から行います。
- ダッシュボードにログインするには、
- ページ内に「ログイン」の表示がある場合はそれをクリック。
- あるいは、以下のようにタイプしてログインします。
http://（WordPressサイトのURL）/admin http://（WordPressサイトのURL）/wp-admin http://（WordPressサイトのURL）/wp-login.php
- ログイン後のダッシュボードのアドレスは以下
http://（WordPressサイトのURL）/wp-admin
- ダッシュボード内には、以下のようなメニューがあります。
- 投稿（記事の投稿管理です）
- メディア（画像などのメディアファイルを一括管理します）
- 固定ページ（投稿とは異なる静的なページを管理します）
- 外観の設定（テーマ、メニュー、ウィジェット）
- プラグイン（プラグインの追加で機能の拡張ができます）
- ユーザー（一つのサイトを複数のユーザで編集できます）
- ツール（エクスポート、インポート）
- 設定（タイトル、キャッチフレーズ、フロントページの設定など）
初期設定
- サイト名（タイトル）とキャッチフレーズ（サブタイトル）
- 設定＞一般設定＞ でこれらを変更することができます。
- フロントページの設定
サイトのトップには、「最新の投稿」あるいは「固定ページ」を利用することができます。前者はBlog、後者は一般サイトのイメージになります。
投稿や固定ページが存在しないと、この作業は試すことができません。- 設定＞表示設定＞フロントページの表示 で変更できます。
- 外観＞カスタマイズ＞フロントページの表示 でも同様。
外観 ＞ テーマ の選定
サイトの外観はページの雛形となるHTML構造とCSSによって決まります。
これをセットで扱っているのが「テーマ」で、その変更は非常に簡単です。
ただし、テーマを変更すると、今まで表示されていたメニューが表示されなくなるなどの現象が生じることもあります（テーマを戻せば元どおりになります。メニューのデータそのものが消えてなくなるわけではありません）。
- 外観＞テーマの変更＞１つ選んで「有効化」
- 有料のものと無料のものがあります。上のメニューで「無料」を選べば無料の候補が並びます。
- WPにはデフォルトテンプレートがあります。
例えば2020年の標準テンプレートには、TwentyTwenty など、西暦を英語読みした名称がつけられています。
記事の作成
WordPress の情報公開には「投稿」と「固定ページ」の２つの方法があります。
はじめに
WordPress はスマホに最適化されているので、PCで編集する際に使いにくさを感じることがあります。以下、ダッシュボード右上のケバブメニュー（3つのドットが垂直に並んだアイコン）を確認して、作業しやすいモードに切り替えておきましょう。
ちなみに、デフォルトはフルスクリーンモードなのでダッシュボード左のメニューが消えます。これは混乱を招くので、「フルスクリーンモード」についているチェックを外す方がいいかもしれません。
投稿（Post｜Flow）
お知らせ、近況報告など、Blog的な情報公開には「投稿」を使います。
投稿＞新規＞タイトルと本文を書いて＞公開
固定ページ（Page｜Stock）
常設的に公開する情報は「固定ページ」を使って掲載します。固定ページは一般に「メインメニュー」に表示されるので、一般のWebサイトと同様のサイト構成が可能になります。
固定ページ＞新規＞タイトルと本文を書いて＞更新
投稿・固定ページの削除について
- 投稿の削除は、投稿＞投稿一覧＞不要な記事のところで「ゴミ箱」
- 固定ページも同様に、固定ページ一覧から削除可能です。
エディタの使い方
WordPress の記事の編集では、ブロックエディタ（Gutenberg）と「テキストエディタ」があって、右上のメニューから切り替えて使うことが出来ます。
- ブロックエディタ（ビジュアルエディタ）
ブロック要素を順次追加する形で記事を構成していきます。見出し、本文段落はもちろん、画像その他、様々な要素をブロック配置することができます。記事の入力においては、以下の動作に留意して下さい。- [ENTER] 段落<p>を新規につくるので、行間が大きく開きます。
- [SHIFT]+[ENTER] 通常の改行です。
- 文字列にリンクを張るには、文字列を選択してリンクアイコンをクリック
リンク先のアドレスを記入します。
- テキストエディタ（コードエディタ）
- 通常のHTMLタグ打ちができます（埋め込みコードも可）。
- 各種の「埋め込みコード」はここにペーストします
- 参考：X-server のサポートページにわかりやすい解説があります。
https://www.xserver.ne.jp/blog/using-block-editor/
投稿の詳細設定
投稿全体や記事内の個々のブロックのスタイルに関する設定が可能です。
画面右上の「設定アイコン」をクリックするとパネルが表示されます。
- 投稿の設定（右図）
- 投稿
- AMPの有効化
- パーマリンク
- カテゴリー
- タグ
- アイキャッチ画像
- 抜粋
- ディスカッション
- 投稿の属性
- ブロックの設定（左図）
- タイポグラフィー
- 色設定
- テキスト設定
メディア
メディアの管理
WordPressでは画像や動画・音楽などをメディアと呼びます。
- 投稿や固定ページの作成中にアップする
投稿記事の記載中に、当該箇所で「メディアの追加」 - メディアの一括管理 ダッシュボード＞メディア
- メディアの追加
メディア＞新規追加＞画像をドラッグ＆ドロップ - メディアの編集
メディア＞ライブラリ＞当該メディアの「編集」 - メディアの削除
メディア＞ライブラリ＞当該メディアの「完全に削除」
- メディアの追加
参考：他人の著作物を勝手にアップロードすることは違法です。
サンプル画像(投稿練習)では、WikimediaCommonsなどのサイトで
PublicDomainの画像を見つけて利用して下さい。以下、検索事例
https://commons.wikimedia.org/wiki/Leonardo_da_Vinci
メディアの活用
メディア（画像）は以下の場面で利用することができます。
- 投稿や固定ページに挿入する（一般的な活用方法）
- スライドショーを作る
- ヘッダー画像に使う
- アイキャッチ画像として使う
私のアナザースカイ｜現状分析
あなた(たち)が選定した「場所」について、Web上の記事を検索して、すでにどのような情報がアップされているか、いわゆる「先行事例」をピックアップするとともに、それらが抱える「問題（欠けていること）」を見いだして下さい。
学科サイトに本日の作業結果を報告
プロジェクトページの下の方、Worklog に以下の形式で報告を行って下さい。
**2020.10.01 ***私のアナザースカイ｜先行情報URL -https://xxxxxx.xxxx.xxx -https://xxxxxx.xxxxxxx.xxx ~ ***私のアナザースカイ｜現状の問題 -◯◯◯◯の情報が不足している。 -◯◯◯◯◯◯を紹介するにあたって◯◯◯の視点が欠けている。 ~ ***WordPress｜技術メモ （本日の演習で学んだ WordPress の基本操作についてメモを残しましょう） ~