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
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.3k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
5つのアンチパターンから学ぶLT設計
narihara
1
170
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
890
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.5k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
160
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Become a Pro
speakerdeck
PRO
29
5.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Optimizing for Happiness
mojombo
379
70k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
4 Signs Your Business is Dying
shpigford
184
22k
It's Worth the Effort
3n
185
28k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Six Lessons from altMBA
skipperchong
28
3.9k
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