Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
市民の先生_2WordPressのカスタマイズ方法.pdf
keita
June 13, 2021
Design
0
130
市民の先生_2WordPressのカスタマイズ方法.pdf
keita
June 13, 2021
Tweet
Share
More Decks by keita
See All by keita
市民の先生イントロダクションR4前期.pdf
keita_yoshikawa
0
2
市民の先生イントロダクションR4前期.pdf
keita_yoshikawa
0
8
市民の先生_1ホームページとWordPressについて.pdf
keita_yoshikawa
0
5
鷹栖小学校.pdf
keita_yoshikawa
0
26
市民の先生_6ホームページの運用とSEO.pdf
keita_yoshikawa
0
67
市民の先生_5アナリティクスの使い方.pdf
keita_yoshikawa
0
93
市民の先生_4写真素材と画像作成.pdf
keita_yoshikawa
0
75
06_Scratchオフラインエディターのダウンロード方法.pdf
keita_yoshikawa
0
280
市民の先生_1ホームページとWordPressについて_イーラボ用.pdf
keita_yoshikawa
0
28
Other Decks in Design
See All in Design
Untitled (Baseball)
heewon
2
310
Sponge Bob Exercise Sequence
diablicos_
0
170
アンラーンし続けるデザインプロセス / DESIGNWAVEvol.04
daitorii
2
270
Storyboard: Midnight Cookie
luchiianita
0
210
Designing for trust: Applying Promise Theory to collaborate effectively with your remote teams
akiramotomura
0
420
エアデザイン(AIR Design)サービス資料
air_design
0
130k
ラクスUI開発課のチーム活動 / 220222_uiux
rakus_dev
0
490
はじめまして、株式会社サインコサインです。(2022.04)
kakukoki
PRO
2
3.3k
デザイン編 Hatena Engineer Seminar #19
takuwolog
2
690
Детский парк Фили
zapoimu
0
540
From Design Systems to DesignOps: Establishing DesignOps at your org
soysaucechin
1
170
第10回_業務システムのUX/UIデザイン改善によくある間違いとその解決策
fixel_admin
1
680
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Product Roadmaps are Hard
iamctodd
34
6.5k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Thoughts on Productivity
jonyablonski
43
2.3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Bootstrapping a Software Product
garrettdimon
296
110k
Happy Clients
brianwarren
89
5.6k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
104
16k
Designing with Data
zakiwarfel
91
3.9k
Automating Front-end Workflow
addyosmani
1351
200k
Transcript
DERA-DESIGN 01 で ホームページを作ろう! #2WordPressのカスタマイズ方法
DERA-DESIGN 02 WordPressのインストール サーバ インストール方法はサーバによって違います
DERA-DESIGN 03 今回はXSERVERを使います インストール方法はサーバによって違います
DERA-DESIGN 04 ドメインの設定をする 実際の画面を見ながら説明します ①ドメイン設定 ドメイン設定追加 ②ドメイン名を入力して確認画面へ ③追加する
DERA-DESIGN 05 ネームサーバ設定 実際の画面を見ながら説明します ①コントロールパネルからドメイン選択 ②ネームサーバ設定変更 ③ネームサーバ情報を入力し更新 (XSERVERではサーバ情報にあります)
DERA-DESIGN 06 WordPress簡単インストール 実際の画面を見ながら説明します https://www.xserver.ne.jp/manual/man_install_auto_word.php ①WordPress 簡単インストールを押す ②ドメイン選択する ③WordPressインストールのタブにする ④情報を入力し確認へ
インストール
DERA-DESIGN 07 の準備は完了です これで
DERA-DESIGN 08 のカスタマイズ
DERA-DESIGN 09 初期状態だとこんな感じです Twenty Twenty-One というテーマが有効化されています
10 DERA-DESIGN テーマを選びます 外観 テーマ 新規追加
11 DERA-DESIGN 説明では 「Lightning」 を使います テーマを追加画面 「Lightning」 で検索 インストール
有効化
DERA-DESIGN 12 プラグインの入れ方 プラグイン 新規追加
DERA-DESIGN 13 VK All in One Expansion Unit プラグインを追加画面 「VK
All in One Expansion Unit」 で検索
DERA-DESIGN 14 設定:一般設定 設定 一般設定 のカスタマイズLV:˒ˑˑˑˑ
DERA-DESIGN 15 DERA-DESIGN 設定:パーマリンク設定 設定 パーマリンク設定 のカスタマイズLV:˒˒ˑˑˑ
DERA-DESIGN 16 テーマカスタマイザーから編集する 外観 カスタマイズ のカスタマイズLV:˒˒˒ˑˑ
DERA-DESIGN 17 追加CSSで装飾する 外観 カスタマイズ 追加CSS のカスタマイズLV:˒˒˒˒ˑ
DERA-DESIGN 18 テーマエディターから編集する 外観 テーマエディター のカスタマイズLV:˒˒˒˒˒
DERA-DESIGN 19 テーマを編集する時は子テーマで 子テーマは、 テーマの機能とスタイルを継承したテーマです。 既存 のテーマを変更する方法として、 子テーマが推奨されています。 子テーマの利点 •
テーマのアップデートで上書きされない • 開発時間を短縮できまる • WordPress のテーマの開発を良い形で学べる 引用:https://www.xserver.ne.jp/manual/man_install_auto_word.php
DERA-DESIGN 20 1. 親テーマのディレクトリを確認 2. 子テーマのディレクトリを作成 3. 必要なファイルを作成 (
1 ) style.css のスタイルシートヘッダで親テーマを指定 (2) functions.php ファイルの作成 子テーマ設定方法
DERA-DESIGN 21 wp-content Twenty Nineteen Twenty Twenty Twenty Twenty-One Lightning
themes 親テーマのディレクトリを確認する
DERA-DESIGN 22 DERA-DESIGN 22 wp-content Twenty Nineteen Twenty Twenty Twenty
Twenty-One Lightning themes Lightning-child 子テーマのディレクトリを作成
DERA-DESIGN 23 必要なファイルを作成 style.css function.php Lightning-child
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
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 親テーマのディレクトリを入れる
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
DERA-DESIGN 27 Lightningの場合 https://lightning.nagoya/ja/setting/customize/child_theme 子テーマ用のサンプルファイルをアップロードするだけでOK
DERA-DESIGN 28 以上 ご清聴ありがとう ございました