Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
進め! テーマ作成の道/kwpm_kyoto4
Search
HsmtNotiQuo
May 05, 2019
Programming
1
390
進め! テーマ作成の道/kwpm_kyoto4
2019年5月5日、Kansai WordPress Meetup 京都 #4 「テーマのカスタマイズ」で登壇した際のスライドです。
HsmtNotiQuo
May 05, 2019
Tweet
Share
More Decks by HsmtNotiQuo
See All by HsmtNotiQuo
見たことない やったことない WordCamp
hsmtnotiquo
0
40
PhotoshopでWebサイトをデザインする私が選ぶ「Photoshopのここが好き!」なポイント
hsmtnotiquo
0
75
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
18k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Porting a visionOS App to Android XR
akkeylab
0
470
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
13k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Six Lessons from altMBA
skipperchong
28
3.9k
Scaling GitHub
holman
460
140k
Balancing Empowerment & Direction
lara
1
430
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Transcript
テーマ作成の道! Kansai WordPress Meetup in Kyoto 進め!
ひしもち(久本 美咲) • Webデザイン&マークアップ • フリーランス • WordPress歴4年弱 • 両生類・爬虫類が好き
• ゲームも好き 本日のスライドカラーテーマは、 マダラヤドクガエルくんです。
【初心者向け】 テーマ作成
既存テーマのカスタマイズ 子テーマの作成 オリジナルデザインでテーマの自作
テーマ作成の下準備 1. HTML/CSSでコーディングしたページを用意する。 2. 開発環境を用意する。 ex) XAMPP入れる。 サーバー上にもうひとつインストールする。 Local by
Flywheel を使う。
最低限必要なファイルを作成する! WordPressの管理画面で、「テーマ」として認識される ために最低限必要なファイルは…… • style.css • index.php index.php は、 ひとまず白紙でも大丈夫!
style.css に必要な記述 公式テーマディレクトリへ 登録しようと思うなら各項 目の記載が必要。 /* Theme Name: テーマの名前 Theme
URI: テーマURL Author: 作成者 Author URI: 作成者のURL Description: テーマの説明 Version: バージョン情報 License: ライセンス情報 License URI: ライセンスURL Tags: カンマ区切りでタグを指定 */ ですが……
style.css に必要な記述 テーマとして動かすために 必須なのは、テーマの名前 のみ! /* Theme Name: テーマの名前 Theme
URI: テーマURL Author: 作成者 Author URI: 作成者のURL Description: テーマの説明 Version: バージョン情報 License: ライセンス情報 License URI: ライセンスURL Tags: カンマ区切りでタグを指定 */
【目標】 まずは作ってみる!
よく使われるテーマファイル • style.css • functions.php • index.php • header.php •
sidebar.php • footer.php • page.php • archive.php • single.php • comments.php
HTMLファイルを、分割する 1. header.php 2. index.php 3. sidebar.php 4. footer.php ①
② ③ ④
その他の cssファイル、jsファイル • style.css • functions.php • index.php • header.php
• sidebar.php .css .js css .css js .js …
headerやfooterを読み込む header.php や footer.php などの共通で使用するパー ツは、表示させたい場所に 指定のコードを書いて読み 込むことができます。 <?php get_header();
?> header.phpを読み込む <?php get_footer(); ?> footer.phpを読み込む <?php get_sidebar(); ?> sidebar.phpを読み込む
wp_head(); と wp_footer(); <?php wp_head(); ?> </head> 直前に記述。必要な外部プログラム等を読み込むHTMLを 出力する。プラグインの動作等に影響。 <?php
wp_footer(); ?> </body> 直前に記述。画面上部に管理バーを表示させたりしてい る。画面上部に突如現れた謎の余白の原因となることが多い。
【オメデトウ】 枠組み完成!
【WordPress】 テンプレートタグを使う
// サイトのURL <?php echo home_url(); ?> // サイトのタイトル(管理画面 一般設定で入力したもの) <?php
bloginfo(‘name’); ?> //ページのタイトル(記事ページでは投稿のタイトル、カテゴリーページではカテゴリー名、など) <?php wp_title(); ?> //サイトのキャッチフレーズ(管理画面 一般設定で入力したもの ) <?php bloginfo(‘description’); ?> //このテーマディレクトリまでのパス <?php echo get_template_directory_uri(); ?> サイトのURLや画像のパスを置換える
// サイトのURL <?php echo home_url(); ?> //このテーマディレクトリまでのパス <?php echo get_template_directory_uri();
?> エスケープ処理 esc_url() // サイトのURL <?php echo esc_url( home_url(‘/’) ); ?> //このテーマディレクトリまでのパス <?php echo esc_url( get_template_directory_uri() ); ?>
推奨/非推奨 いろんな書き方 今まで使われていた 書き方や方法 新しい書き方や方法 ? 推奨? 非推奨?
WordPress Codex(日本語版) http://wpdocs.osdn.jp/ !
【目標達成】 まずは作ってみた!
【次の目標】 機能追加・テーマチェック
functions.phpで、できること • css、jsを読み込む ※ head内で読み込んでも動く • アイキャッチ画像を表示させる機能を追加 • ウィジェット機能を追加 • その他諸々の機能を追加
(すこしずつ慣れていけば大丈夫!)
その他、あったほうがいいファイル • screenshot.png • 404.php • search.php • comments.php 関係ないけど
いてもいいカエル
Theme Check でテスト 公式ディレクトリへ登録する際の審査基準で、テーマ チェックを行ってくれるプラグイン。指定したテーマに 対して、あるべきCSSの記述が抜けていたり、機能が不足 していないかをチェックできる。 https://ja.wordpress.org/plugins/theme-check/
テーマユニットテスト 表示確認用のダミーデータをインポートして、様々な使 用ケースにおいて表示崩れなどの不具合が発生しないか をテストできる。 https://github.com/jawordpressorg/theme-test-data-ja https://wpdocs.osdn.jp/テーマユニットテスト
【まとめ】 まずは作ってみる! 作ったらより良くする!
ご清聴 ありがとうございました Kansai WordPress Meetup in Kyoto END Twitter @HsmtWeb