第3回 WordPress入門2
特定演習|情報デザインB|芸術研究科 博士前期課程|2020.09.30|遠隔
情報共有シート|芸術研究科サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - WordPress の使い方に関する説明を補足します。
- 説明の後、それぞれサイトのカスタマイズを行なって下さい。
ZoomMeeting 15:40 -
以下の会議室にお入り下さい
Zoomミーティングに参加する(終了しました)
本日のメニュー
WordPress の基本操作
サイトの管理
サイトの管理は「ダッシュボード」から行います。
- ダッシュボードにログインするには、
- ページ内に「ログイン」の表示がある場合はそれをクリック。
- あるいは、以下のようにタイプしてログインします。
http://(WordPressサイトのURL)/admin http://(WordPressサイトのURL)/wp-admin http://(WordPressサイトのURL)/wp-login.php
- ログイン後のダッシュボードのアドレスは以下
http://(WordPressサイトのURL)/wp-admin
- ダッシュボード内には、以下のようなメニューがあります。
- 投稿(記事の投稿管理です)
- メディア(画像などのメディアファイルを一括管理します)
- 固定ページ(投稿とは異なる静的なページを管理します)
- 外観の設定(テーマ、メニュー、ウィジェット)
- プラグイン(プラグインの追加で機能の拡張ができます)
- ユーザー(一つのサイトを複数のユーザで編集できます)
- ツール(エクスポート、インポート)
- 設定(タイトル、キャッチフレーズ、フロントページの設定など)
初期設定
- サイト名(タイトル)とキャッチフレーズ(サブタイトル)
- 設定>一般設定> でこれらを変更することができます。
- フロントページの設定
サイトのトップには、「最新の投稿」あるいは「固定ページ」を利用することができます。前者はBlog、後者は一般サイトのイメージになります。
投稿や固定ページが存在しないと、この作業は試すことができません。- 設定>表示設定>フロントページの表示 で変更できます。
- 外観>カスタマイズ>フロントページの表示 でも同様。
外観 > テーマ の選定
サイトの外観はページの雛形となるHTML構造とCSSによって決まります。
これをセットで扱っているのが「テーマ」で、その変更は非常に簡単です。
ただし、テーマを変更すると、今まで表示されていたメニューが表示されなくなるなどの現象が生じることもあります(テーマを戻せば元どおりになります。メニューのデータそのものが消えてなくなるわけではありません)。
- 外観>テーマの変更>1つ選んで「有効化」
- 有料のものと無料のものがあります。上のメニューで「無料」を選べば無料の候補が並びます。
- WPにはデフォルトテンプレートがあります。
例えば2020年の標準テンプレートには、TwentyTwenty など、西暦を英語読みした名称がつけられています。
記事の作成
WordPress の情報公開には「投稿」と「固定ページ」の2つの方法があります。
はじめに
最近のWordPress はスマホに最適化されているので、PCで編集する際に使いにくさを感じることがあります。以下、ダッシュボード右上のケバブメニュー(3つのドットが垂直に並んだアイコン)を確認して、作業しやすいモードに切り替えておきましょう。
ちなみに、デフォルトはフルスクリーンモードなのでダッシュボード左のメニューが消えます。これは混乱を招くので、「フルスクリーンモード」についているチェックを外す方がいいかもしれません。
投稿(Post|Flow)
お知らせ、近況報告など、Blog的な情報公開には「投稿」を使います。
投稿>新規>タイトルと本文を書いて>公開
固定ページ(Page|Stock)
常設的に公開する情報は「固定ページ」を使って掲載します。固定ページは一般に「メインメニュー」に表示されるので、一般のWebサイトと同様のサイト構成が可能になります。
固定ページ>新規>タイトルと本文を書いて>更新
投稿・固定ページの削除について
- 投稿の削除は、投稿>投稿一覧>不要な記事のところで「ゴミ箱」
- 固定ページも同様に、固定ページ一覧から削除可能です。
エディタの使い方
WordPress の記事の編集では、ブロックエディタ(Gutenberg)と「テキストエディタ」があって、右上のメニューから切り替えて使うことが出来ます。
- ブロックエディタ
記事の入力においては、以下の動作に留意して下さい。- [ENTER] 段落<p>を新規につくるので、行間が大きく開きます。
- [SHIFT]+[ENTER] 通常の改行です。
- 文字列にリンクを張るには、文字列を選択してリンクアイコンをクリック
リンク先のアドレスを記入します。
- テキストエディタ:HTMLタグを記述する(埋め込みコードも可)
- 通常のHTMLタグ打ちができます。
- 各種の「埋め込みコード」はここにペーストします
- 参考:X-server のサポートページにわかりやすい解説があります。
https://www.xserver.ne.jp/blog/using-block-editor/
投稿の詳細設定
投稿全体や記事内の個々のブロックのスタイルに関する設定が可能です。
画面右上の「設定アイコン」をクリックするとパネルが表示されます。
- 投稿の設定(右図)
- 投稿
- AMPの有効化
- パーマリンク
- カテゴリー
- タグ
- アイキャッチ画像
- ブロックの設定(左図)
- タイポグラフィー
- 色設定
- テキスト設定
メディア
メディアの管理
WordPressでは画像や動画・音楽などをメディアと呼びます。
- 投稿や固定ページの作成中にアップする
投稿記事の記載中に、当該箇所で「メディアの追加」 - メディアの一括管理 ダッシュボード>メディア
- メディアの追加
メディア>新規追加>画像をドラッグ&ドロップ - メディアの編集
メディア>ライブラリ>当該メディアの「編集」 - メディアの削除
メディア>ライブラリ>当該メディアの「完全に削除」
- メディアの追加
参考:他人の著作物を勝手にアップロードすることは違法です。
サンプル画像(投稿練習)では、WikimediaCommonsなどのサイトで
PublicDomainの画像を見つけて利用して下さい。以下、検索事例
https://commons.wikimedia.org/wiki/Leonardo_da_Vinci
メディアの活用
メディア(画像)は以下の場面で利用することができます。
- 投稿や固定ページに挿入する(一般的な活用方法)
- ヘッダー画像に使う
- アイキャッチ画像として使う
その他参考:固定ページに「最新の投稿」
フロントぺージに「固定ページ」を選択すると「最新の投稿」が表示されなくなります。一般にはテーマスクリプトを編集して、トップの固定ページ内に最新の投稿がコレクションされるように作り変えるのですが、ここでは別の簡単な方法を紹介します。
- 1) 設定 > 表示 をご確認ください。
- 2)「フロントページ」に固定ページを割り当てる
- 3)「投稿ページ」に固定ページを割り当てる
>そこが「最新の投稿」の提示場所になります。
次回に向けて
次回は、メニューの設定、カテゴリーとタグについて説明します。
- 次回の内容を確認するには、複数の投稿が必要です。
- 写真と文章をセットにしたダミー記事を 10件程度投稿しておいて下さい。