市民の先生_2WordPressのカスタマイズ方法.pdf

Slide 1

Slide 1 text

DERA-DESIGN 01 でホームページを作ろう! #2WordPressのカスタマイズ方法

Slide 2

Slide 2 text

DERA-DESIGN 02 WordPressのインストールサーバインストール方法はサーバによって違います

Slide 3

Slide 3 text

DERA-DESIGN 03 今回はXSERVERを使いますインストール方法はサーバによって違います

Slide 4

Slide 4 text

DERA-DESIGN 04 ドメインの設定をする実際の画面を見ながら説明します ①ドメイン設定 ‎ドメイン設定追加 ②ドメイン名を入力して確認画面へ ③追加する

Slide 5

Slide 5 text

DERA-DESIGN 05 ネームサーバ設定実際の画面を見ながら説明します ①コントロールパネルからドメイン選択 ②ネームサーバ設定変更 ③ネームサーバ情報を入力し更新　（XSERVERではサーバ情報にあります）

Slide 6

Slide 6 text

DERA-DESIGN 06 WordPress簡単インストール実際の画面を見ながら説明します https://www.xserver.ne.jp/manual/man_install_auto_word.php ①WordPress 簡単インストールを押す ②ドメイン選択する ③WordPressインストールのタブにする ④情報を入力し確認へ ‎インストール

Slide 7

Slide 7 text

DERA-DESIGN 07 の準備は完了ですこれで

Slide 8

Slide 8 text

DERA-DESIGN 08 のカスタマイズ

Slide 9

Slide 9 text

DERA-DESIGN 09 初期状態だとこんな感じです Twenty Twenty-One というテーマが有効化されています

Slide 10

Slide 10 text

10 DERA-DESIGN テーマを選びます外観 ‎ テーマ ‎ 新規追加

Slide 11

Slide 11 text

11 DERA-DESIGN 説明では「Lightning」を使いますテーマを追加画面「Lightning」で検索 ‎ インストール ‎ 有効化

Slide 12

Slide 12 text

DERA-DESIGN 12 プラグインの入れ方プラグイン ‎ 新規追加

Slide 13

Slide 13 text

DERA-DESIGN 13 VK All in One Expansion Unit プラグインを追加画面「VK All in One Expansion Unit」で検索

Slide 14

Slide 14 text

DERA-DESIGN 14 設定：一般設定設定 ‎ 一般設定のカスタマイズLV：˒ˑˑˑˑ

Slide 15

Slide 15 text

DERA-DESIGN 15 DERA-DESIGN 設定：パーマリンク設定設定 ‎ パーマリンク設定のカスタマイズLV：˒˒ˑˑˑ

Slide 16

Slide 16 text

DERA-DESIGN 16 テーマカスタマイザーから編集する外観 ‎ カスタマイズのカスタマイズLV：˒˒˒ˑˑ

Slide 17

Slide 17 text

DERA-DESIGN 17 追加CSSで装飾する外観 ‎ カスタマイズ ‎ 追加CSS のカスタマイズLV：˒˒˒˒ˑ

Slide 18

Slide 18 text

DERA-DESIGN 18 テーマエディターから編集する外観 ‎ テーマエディターのカスタマイズLV：˒˒˒˒˒

Slide 19

Slide 19 text

DERA-DESIGN 19 テーマを編集する時は子テーマで子テーマは、テーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。子テーマの利点 ● テーマのアップデートで上書きされない ● 開発時間を短縮できまる ● WordPress のテーマの開発を良い形で学べる引用：https://www.xserver.ne.jp/manual/man_install_auto_word.php

Slide 20

Slide 20 text

DERA-DESIGN 20 1. 親テーマのディレクトリを確認 2. 子テーマのディレクトリを作成 3. 必要なファイルを作成　　（１） style.css のスタイルシートヘッダで親テーマを指定　　（2） functions.php ファイルの作成子テーマ設定方法

Slide 21

Slide 21 text

DERA-DESIGN 21 wp-content Twenty Nineteen Twenty Twenty Twenty Twenty-One Lightning themes 親テーマのディレクトリを確認する

Slide 22

Slide 22 text

DERA-DESIGN 22 DERA-DESIGN 22 wp-content Twenty Nineteen Twenty Twenty Twenty Twenty-One Lightning themes Lightning-child 子テーマのディレクトリを作成

Slide 23

Slide 23 text

DERA-DESIGN 23 必要なファイルを作成 style.css function.php Lightning-child

Slide 24

Slide 24 text

DERA-DESIGN 24 style.cssを編集する /* Theme Name:Lightning-child Theme URI:http://example.com/Lightning-child/ Description:Lightning-child Child Theme Author:Keita Yoshikawa Author URI:http://example.com Template:lightning Version:1.0.0 License:GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags:light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain:Lightning-child */ 引用：https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

Slide 25

Slide 25 text

DERA-DESIGN 25 style.cssを編集する /* Theme Name:Lightning-child Theme URI:http://example.com/Lightning-child/ Description:Lightning-child Child Theme Author:Keita Yoshikawa Author URI:http://example.com Template:lightning Version:1.0.0 License:GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags:light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain:Lightning-child */ 引用：https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E 親テーマのディレクトリを入れる

Slide 26

Slide 26 text

DERA-DESIGN 26 function.phpを編集する引用：https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

Slide 27

Slide 27 text

DERA-DESIGN 27 Lightningの場合 https://lightning.nagoya/ja/setting/customize/child_theme 子テーマ用のサンプルファイルをアップロードするだけでOK

Slide 28

Slide 28 text

DERA-DESIGN 28 以上ご清聴ありがとうございました