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
WordPressブログカスタマイズ今日から本気出す
Search
Yoshiaki Ogata
June 23, 2018
Programming
0
850
WordPressブログカスタマイズ今日から本気出す
2018年6月23日 第7回 東北ブロガー会 ~PHPファイルチャレンジワークショップ~での発表資料
Yoshiaki Ogata
June 23, 2018
Tweet
Share
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
ブロックと追加CSSでお手軽カスタマイズ
yosiakatsuki
0
360
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
260
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
110
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
310
プラグイン3分クッキング.pdf
yosiakatsuki
0
30
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
490
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
250
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
860
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
420
Other Decks in Programming
See All in Programming
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
240
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
520
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
240
The Shape of a Service Object
inem
0
440
LR で JSON パーサーを作る / Coding LR JSON Parser
junk0612
2
180
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
180
オートマトン学習しろ / Do automata learning
makenowjust
3
110
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
110
What you can do with Ruby on WebAssembly
kateinoigakukun
0
130
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
120
Why Prism?
kddnewton
4
1.7k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
64
11k
A Modern Web Designer's Workflow
chriscoyier
691
190k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Designing with Data
zakiwarfel
98
5k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
5 minutes of I Can Smell Your CMS
philhawksworth
201
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Practical Orchestrator
shlominoach
185
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Transcript
WordPressブログカスタマイズ 今日から本気出す 2018.06.23 東北ブロガー会 #7
はじめに
本日のスライドは 写真撮影・SNSへのアップOKです!
「#東北ブロガー会」 でシェアしてください!
自己紹介
- 尾形 義暁(おがた よしあき) - フリーランス - WordPress / CSS
/ HTML - Twitter : @yosiakatsuki
群馬を中心に活動する Webエンジニア フリーランス x 会社員
活動
- WordBench Gunma(群馬県) - WordPressもくもく勉強会@本庄(埼玉県)
ブログ向け無料WordPressテーマ
今日お話すること
• カスタマイズは準備が大事 • HTML・CSS・PHP基礎 • WordPressテーマの構造 • テーマのカスタマイズは子テーマを使う • カスタマイズができるようになるには?
カスタマイズできると こんなことができる!
カスタマイズできるとこんなことができる! • 自分だけのブログデザイン • 全ページにイベント告知差し込み • 広告を自由な位置に調整できる • Page Speed
Insights対策できる …などなど
WordPressテーマ カスタマイズの流れ
カスタマイズの流れ • カスタマイズしたいファイルを見つける • 追加したい内容をHTML・PHPで追記 • 装飾をCSSファイルに追記 • サーバーへアップロード
カスタマイズの流れ やることは実は単純
カスタマイズの流れ でも 本気になったら
カスタマイズの流れ • ガツガツカスタマイズできる環境の準備 • カスタマイズしたいファイルを見つける • 追加したい内容をHTML・PHPで追記 • 装飾をCSSファイルに追記 •
サーバーへアップロード
「環境」?
管理画面から カスタマイズできるでしょ?
管理画面からのカスタマイズは オススメできない!
オススメできない理由 • 編集ミスでサイト真っ白 \オワタ/ • 途中放置できない • PC上にWordPressが動く環境を用意するのが簡 単になった(ローカル環境)
編集ミスでサイト真っ白 WordPress 4.9でミスを防ぐ機能が追加 → それでも壊れることはある(やる気になれば壊せる)
途中放置できない • 中途半端でもそのままにしておく → サイトの表示も中途半端な状態に… • 「中途半端になるから元に戻そう…」 → またカスタマイズやり直し…?
ローカル環境の準備が簡単になった • 以前より練習環境の準備が簡単に • サイトが止まってあたふたするより 「ちょっとの手間」で準備をしっかり!
ローカル環境の準備が簡単になった 「失敗し放題」環境があなたのすぐそばに!
WordPressテーマ カスタマイズ準備・便利ツール
ローカル環境
ローカル環境 • PC上で動くWordPress • 「ローカル環境」「開発環境」とか呼ばれる
ローカル環境 サーバー上のWordPressとは別世界 → いくら失敗しても本番サイトが止まらない!
ローカル環境 • 「Local by flywheel」が簡単操作で 環境作れて便利!(複数サイトもOK!)
エディター
エディター • コードの補完機能とか追加できて便利 • Visual Studio Codeあたりが軽くてオススメ
Chromeデベロッパーツール
Chromeデベロッパーツール • ブラウザ上でCSSを試しに変えられる • 試す→コピペ!でカスタマイズが捗る
FTPソフト
FTPソフト • サーバー上のテーマをダウンロード/アップロード • 「FileZilla」などいろいろ
子テーマ
本気でカスタマイズするなら 子テーマを使おう
子テーマ? • 親テーマのレイアウトを引き継ぐ 親テーマ 子テーマ
子テーマのカスタマイズ • カスタマイズしたい部分のファイルだけを編集 → カスタマイズした場所がわかりやすい! single.php 親テーマ 子テーマ ... single.php
子テーマを使う理由 • テーマの更新はテーマ一式まとめて更新 → カスタマイズ内容が吹き飛ぶ 親テーマ 更新前 更新後 single.php single.php’
子テーマを使う理由 • 子テーマ内のファイルは更新の影響を受けない 子テーマ 更新前 更新後 single.php single.php
WordPressテーマ カスタマイズの手順
カスタマイズ手順 1. 事前準備・環境構築 2. カスタマイズ実施 3. サーバーアップロード
1. 事前準備 • 開発環境整備 • エディター準備 • FTPソフトの準備 • 本番サイトのコピー
開発環境準備 • ローカル環境作成 参考 : https://yosiakatsuki.net/blog/wp-local-by-flywheel/
エディター準備 • 「[エディタ名] WordPress」で調べると設定方法と か見つかる
FTPソフトの準備 • ソフトのインストール • サーバーへ接続できることの確認
本番サイトのコピー • 「All in One WP Migration」が便利 • 無料版は容量に制限あり
本番サイトのコピー • 容量オーバーの場合画像を除外 →画像はFTPで別途ダウンロードする
2. カスタマイズ実施
3. サーバーアップロード
開発環境が出来た ↓ ひたすらカスタマイズ
失敗を繰り返して 徐々にカスタマイズが上手になる
いくらでも失敗できる環境で たくさん失敗を繰り返そう!
ローカル環境は もう簡単に作れるようになった!
準備のお話おわり
ここからは より技術的なお話
デザインカスタマイズのお話
ページに表示されている部分
HTML・CSS
HTML・CSS 文書構造 装飾
HTML・CSS 骨組み 壁紙 イメージ
HTML基礎
HTML基礎 • 「HTMLタグ」を使って書く • 開始タグ「<タグ>」、終了タグ「</タグ>」 <div> 文章などをくくる </div>
HTML基礎 • 開始タグ〜終了タグではないものもある <img src=”画像URL” />
HTML基礎 • HTMLタグにはそれぞれ意味がある <img src=”画像” /> <p>段落</p> <a href=””>リンク</a> <h1>見出し</h1>
<blockquote>引用</blockquote>
HTML基礎 • 特別な意味を持たないタグもある <div> ~~ </div> <span> ~~ </span>
HTML基礎 • できるだけ意味のあるタグを使う • 装飾はCSSで <h2> 見出し </h2> <p> 段落
</p>
「意味のあるタグ」 って…わからないよ〜
ですよね… 難しいです。ここらへん
HTML基礎 • 考えすぎてカスタマイズが止まるくらいなら divとspanを使いましょう! <div> ~~ </div> <span> ~~ </span>
「意味」を考えることは忘れずに
CSS基礎
CSS基礎 • 「どこに」「何を」「どれくらい」装飾するか指定する p { font-size: 16px; }
CSS基礎 p { font-size: 16px; } どこに(セレクタ) なにを(プロパティ) どれくらい(値)
HTMLとCSSを組み合わせる
HTMLとCSSを組み合わせる • HTMLをCSSで装飾する方法 ◦ HTMLタグに装飾 ◦ id指定で装飾 ◦ class指定で装飾
HTMLとCSSを組み合わせる • HTMLをCSSで装飾する方法 ◦ HTMLタグに装飾 ◦ id指定で装飾 ◦ class指定で装飾
「id」と「class」
「id」と「class」 • HTMLタグに「id」や「class」で名前をつけたり分類 分けすることができる <div id=”site-footer”> …... </div> <div class=”footer-sns”>
…... </div>
「id」と「class」 • 「id」で該当のHTMLタグに名前をつける • ページ内で同じidが複数登場するのはNG <div id=”[id名その1]”>...</div> <div id=”[id名その2]”>...</div>
<div id=”[id名その1]”>...</div> <div id=”[id名その2]”>...</div> 「id」と「class」 • 1つのHTMLには1つのidしか指定できない
「id」と「class」 • 「class」で該当のHTMLタグを分類分け • classはページ内で何度登場してもOK <div class=”[class-1]”>...</div> <div class=”[class-1]”>...</div>
「id」と「class」 • 1つのHTMLに複数のclassが指定できる • スペース区切りでclassを複数指定する <div class=”class-1 class-2 class-3”>...</div>
HTMLとCSSを組み合わせる • HTMLをCSSで装飾する方法 ◦ HTMLタグに装飾 ◦ id指定で装飾 ◦ class指定で装飾
HTMLタグに装飾
HTMLをCSSで装飾する方法 : HTMLタグに装飾 • ページ内に登場する該当タグ全部に影響 • 特定の場所のスタイル指定には向かない p { font-size:
16px; }
id指定で装飾
HTMLをCSSで装飾する方法 : id指定で装飾 • HTMLの「id」属性と対応付ける • セレクタは「#[id名]」と書く #site-footer { color:
#fff; } <div id=”site-footer”> …... </div>
HTMLをCSSで装飾する方法 : id指定で装飾 • idはページ内で1つしか書けないルール • class指定のほうがオススメ #site-footer { color:
#fff; } <div id=”site-footer”> …... </div>
class指定で装飾
HTMLをCSSで装飾する方法 : class指定で装飾 • HTMLの「class」属性と対応付ける • セレクタは「.[class名]」と書く .footer-sns { color:
#ddd; } <div class=”footer-sns”> …... </div>
HTMLをCSSで装飾する方法 : class指定で装飾 • HTMLとCSSの紐づけは classを使うことが多い .footer-sns { color: #ddd;
} <div class=”footer-sns”> …... </div>
HTML・CSSカスタマイズ手順
HTML・CSSカスタマイズ手順 1. 追加したい内容をHTMLで追記 2. HTMLにclassをつける 3. CSSで該当のclassを装飾する
HTML・CSSカスタマイズ手順 例 イベント告知を表示してみる
1. 追加したい内容をHTMLで追記 • まずはHTMLで表示したい内容を書く <div> <a href="url">6/23(土)仙台で〜〜くれよな!</a> </div>
1. 追加したい内容をHTMLで追記
2. HTMLにclassをつける • HTMLにclassをつける <div class=”event-link”> <a href="url">6/23(土)仙台で〜〜くれよな!</a> </div>
.event-link { margin: 2em 0; padding: 2em; border: 2px solid
#ddd; border-radius: 4px; font-weight: bold; text-align: center; } 3. CSSで該当のclassを装飾する • CSSで装飾する
3. CSSで該当のclassを装飾する
3. CSSで該当のclassを装飾する Chromeのデベロッパーツールを使って 確認しながらやると便利!!
全部のHTMLに classが付けられるわけではない
全部のHTMLにclassが付けられるわけではない • class「event-link」の中のaタグを 装飾したい <div class=”event-link”> <a href="url">文章</a> </div>
全部のHTMLにclassが付けられるわけではない • 入れ子で指定もできる • 上の例は「event-link」の中の「a」 .event-link a { color :
red; } <div class=”event-link”> </div> <a> ここを装飾 </a>
もっと詳しくは 専門の書籍かGoogle先生に聞いてみる
PHPカスタマイズ
WordPressテーマはPHPで作られている WordPressは「PHP」というプログラムを使って作られ ている テーマの中身もほぼPHP
WordPressテーマはPHPで作られている PHPファイル内にHTMLとPHPのコードが 混ざって書かれている
PHP
「プログラムを覚える」 と聞くと難しい?
「PHPという競技のルールを覚える」 ではどうでしょう?
PHP基礎 「<?php」〜「?>」の間にPHPのコードを書く <?php ~~ ?>
PHP基礎 <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
PHP基礎 命令の最後は「;」(セミコロン) <?php $keisan = 1 + 1; ?> 「;」付け忘れで
エラーになることがよくある
PHP基礎 「/*」から「*/」の間はコメント PHPの命令として扱われない <?php /* ここで計算する */ $keisan = 1
+ 1; ?>
PHP基礎 「//」を書くと、「//」から行の終わりまで コメントになる <?php // ここから1行のおわりまでコメントになる $keisan = 1 +
1; ?>
PHP基礎 カスタマイズした内容の説明をメモしておくと 未来の自分が喜ぶ <?php // 未来の自分へのメッセージ $keisan = 1 +
1; ?>
WordPressテーマの話
テーマってどこにあるの?
wp-content themes twentyseventeen WordPressのインストールフォルダ wp-admin wp-config.php …
テーマはパーツをつなぎ合わせて 作られている
テーマはパーツをつなぎ合わせて作られている • ヘッダー • フッター • サイドバー • 固定ページ •
投稿ページ • …
テーマはパーツをつなぎ合わせて作られている • ヘッダー • フッター • サイドバー • 固定ページ •
投稿ページ • … : header.php : footer.php : sidebar.php : page.php : single.php
「テンプレート」 と言われている
テンプレートには役割がある
テンプレートには役割がある • ヘッダー • フッター • サイドバー • … :
header.php : footer.php : sidebar.php
テンプレートには役割がある • 固定ページ • 投稿ページ • アーカイブ • 検索一覧 •
404ページ • … : page.php : single.php : archive.php : search.php : 404.php …
カスタマイズしたいページの 役割を担うテンプレートを編集する
テンプレートには役割がある 投稿記事下に特集リンクを足したい ↓ single.phpを編集
テンプレートには優先順位がある
テンプレートには優先順位がある https://wpdocs.osdn.jp/テンプレート階層
テンプレートには優先順位がある 例:カテゴリー一覧ページ category.php ↓ archive.php ↓ index.php
最初は どのテンプレートが使われてるか さっぱりわかんない
テーマカスタマイズの強い味方 「Show Current Template」プラグイン
テーマカスタマイズの強い味方 読み込まれているテンプレートを表示
テンプレートの呼び出し方
テンプレートの呼び出し方 header.php footer.php sidebar.php
テンプレートの呼び出し方 header.php footer.php single.php sidebar.php get_header() get_sidebar() get_footer() ※single.phpから呼び出す
独自のテンプレートを作る
独自のテンプレートを作る single.phpなど基本テンプレート以外に 独自のテンプレートを作りたい sns-button.php
独自のテンプレートを作る 1. テーマ内にPHPファイルを作る 2. 必要な場所から呼び出す sns-button.php my-theme
独自のテンプレートを作る 必要な場所から呼び出す get_template_part()
独自のテンプレートを作る • 括弧の中に読み込むPHPファイルの名前を書く ◦ フォルダで整理されていたら「フォルダ名/ファイル名」で書く • 「.php」は削除する get_template_part()
独自のテンプレートを作る get_template_part( ‘sns-button’ ) sns-button.php my-theme
独自のテンプレートを作る get_template_part( ‘template-parts/sns-button’ ) sns-button.php my-theme template-parts
パーツごとにテンプレートを分けると 後々の変更が楽になる!
「functions.php」は?
functions.phpは 表示には直接関係しないことが多い
テーマ内で使う 「関数」を書くファイル
「関数」 処理をひとまとめにしたもの
functions.php <?php function my_function( $foo ) { return $foo; }
// 「?>」がないけどそういうものです
functions.php 「functions.phpにコードをコピペ」は ほとんど場合 functions.php の末尾にコピペ
functions.php 「functions.phpのどの位置に…」 という指定はほぼ無い
functions.php = 関数のまとまり それ以外 = ページの表示
WordPressテーマカスタマイズで よく見る関数
テーマカスタマイズでよく見る関数 • the_title() ◦ 投稿タイトルを出力 • the_content() ◦ 投稿本文を出力
テーマカスタマイズでよく見る関数 • the_post_thumbnail() ◦ アイキャッチを出力 • the_permalink() ◦ 投稿URLを出力
テーマカスタマイズでよく見る関数 • get_template_directory_uri() ◦ テーマフォルダまでのURLを取得 ◦ CSSの追加読み込みなどでよく使う
他にもたくさん https://wpdocs.osdn.jp/
テーマカスタマイズは 子テーマを使おう!
子テーマの作り方
子テーマが配布されていれば 一番ラク
wp-content themes twentyseventeen twentyseventeen-child 親テーマ 子テーマ
twentyseventeen-child functions.php style.css 最低でもこの 2ファイルが必要
style.css /* Theme Name: Twenty Seventeen Child Template: twentyseventeen */
Theme Name: [子テーマの名前] Template: [親テーマのフォルダ名]
None
なん………だと…
functions.php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style',
get_template_directory_uri() . '/style.css' ); }
でました!
子テーマカスタマイズ
themes twentyseventeen twentyseventeen-child single.php single.php 同じファイルを 子テーマにコピー
themes twentyseventeen twentyseventeen-child content.php content.php フォルダ階層を 合わせる template-parts template-parts
themes twentyseventeen twentyseventeen-child sns.php sns.php 独自テンプレートは 子テーマだけでOK
いったいどうやったら カスタマイズできるようになるのか?
たくさん練習したら できるようになる
「いや…そう言いましても…」
「目的」をもつ
「目的」をもつ • 広告を自由な位置に調整してガッツリ儲ける! • 他人と一緒のデザインなんて絶対に嫌だ!
目的に対する意識が強いほどいい
意識が高まったら
まずは「転び方」から覚える
スキーや柔道は 転び方や受け身から学びますよね
ブログカスタマイズも 失敗から学ぶことが多い
でも… 動いてるサイトで転ぶと
ブログが止まる
だから「ローカル環境」が大事
いくら壊しても大丈夫なら いくらでも失敗できる
失敗 ↓ なんでや!? ↓ ここがいけなかったのか! ↓ 出来たー!!
これの繰り返し
近道は無い
ただ、便利なサービスはある!
便利なサービス プログラム学習サイトを使うのもアリ
ひたすらググるのもいいでしょう ※ちなみに僕はひたすらググり倒しました
まずは コードのコピペ + 調整 が難なくできるまで慣れる
慣れてきたら 次はCodexを読めるようにがんばる
わからない言葉は調べる 「配列」ってなんぞ?
サンプルコードが分かれば 「脱コピペ」でカスタマイズできる
カスタマイズ上達への道 • やりたいことを達成するまでめげない! • たくさん書いてたくさん失敗する! • わからないことがあれば調べる! • 調べてもわからなければ誰かに聞いてみる! •
勉強会・もくもく会とかあれば参加してみる!
カスタマイズでブログ運営が より豊かになりますように
ありがとうございました!