Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

D0ea52d36864ba36bdd5f8be4c0fcdb7?s=47 keita
June 13, 2021

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

D0ea52d36864ba36bdd5f8be4c0fcdb7?s=128

keita

June 13, 2021
Tweet

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. 必要なファイルを作成    (

    1 ) 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 以上 ご清聴ありがとう ございました