市民の先生_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 以上 ご清聴ありがとう ございました