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

Transcript

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

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

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

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

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

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

   ‎
   インストール

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

8. DERA-DESIGN 08 のカスタマイズ

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

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

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

    ‎ 有効化

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

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

    All in One Expansion Unit」 で検索

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

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

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

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

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

19. DERA-DESIGN 19 テーマを編集する時は子テーマで 子テーマは、 テーマの機能とスタイルを継承したテーマです。 既存 のテーマを変更する方法として、 子テーマが推奨されています。 子テーマの利点 •

    テーマのアップデートで上書きされない • 開発時間を短縮できまる • WordPress のテーマの開発を良い形で学べる 引用：https://www.xserver.ne.jp/manual/man_install_auto_word.php

20. DERA-DESIGN 20 1. 親テーマのディレクトリを確認 2. 子テーマのディレクトリを作成 3. 必要なファイルを作成 　　 （

    １ ） style.css のスタイルシートヘッダで親テーマを指定 　　 （2） functions.php ファイルの作成 子テーマ設定方法

21. DERA-DESIGN 21 wp-content Twenty Nineteen Twenty Twenty Twenty Twenty-One Lightning

    themes 親テーマのディレクトリを確認する

22. DERA-DESIGN 22 DERA-DESIGN 22 wp-content Twenty Nineteen Twenty Twenty Twenty

    Twenty-One Lightning themes Lightning-child 子テーマのディレクトリを作成

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

24. 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

25. 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 親テーマのディレクトリを入れる

26. DERA-DESIGN 26 function.phpを編集する <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles()

    { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array ('parent-style') ); } ?> 引用：https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

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

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