WordPress基礎講座5 テーマ作成基礎知識
•
0 likes•767 views
Web制作会社の新人研修用資料 WordPressテーマを作成する前に知っておくべき基本的な知識をまとめました。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to WordPress基礎講座5 テーマ作成基礎知識
Similar to WordPress基礎講座5 テーマ作成基礎知識 (20)
More from Akinori Kawamitsu
WordPress基礎講座5 テーマ作成基礎知識
- 3. 3 WordPress基礎講座(5) 「テーマ」とは ● ウェブページを組み立てるためのPHPプログラムファイル（テ ンプレート）の集まり。 ● index.php と style.css は必須。他は必要に応じて作成す る。 ● 他によく使うテンプレートファイルは、 – header.php, footer.php, sidebar.php (モジュールテンプレート) – home.php, page.php, post.php, category.php, archive.php, 404.php (ベーステンプレート) – functions.php (関数テンプレート)
- 4. 4 WordPress基礎講座(5) モジュールテンプレート ● 多くのページで共通する項目（ヘッダー・フッター・ サイドバー）を「部品」にしたテンプレート ● ベーステンプレート内に呼び出される
- 5. 5 WordPress基礎講座(5) ベーステンプレート ● モジュールテンプレートを配置する土台のテンプ レート ● スラッグやIDごとに異なるテンプレートを適用でき る。 ● 細かい分類のテンプレートが無い場合、最終的に index.phpを参照する。
- 6. 6 WordPress基礎講座(5) ベーステンプレートの参照順 トップページの場合 – home.php → index.php 投稿ページの場合 – single-{投稿タイプ}.php → single.php → index.php 固定ページ – カスタムテンプレートファイル → page-{slug}.php → page-{id}.php → page.php → index.php カテゴリーページ – category-{slug}.php → category-{id}.php → category.php → archive.php → index.php
- 8. 8 WordPress基礎講座(5) HTMLを書く ● まずはトップページを作り、カテゴリ、個別ページはメインカラムを変更して 作る。 ● どの情報を、どのように出力したいかをしっかり考える。 – 追加が頻繁なものは記事。定番のページ（会社概要など）は固定ページ – カテゴリは出力パターンをしっかり考える。 ● Aはトップページに表示する、BとCは一覧ページがあればOK,など。 ● 気まぐれでトップページに出すなどといった仕様は、管理・更新が面倒なサイトになる。 ● セマンティック（構造化）を意識して書く。構造的にできないのは最初の設 計が悪い。 ● 「後で考える」「作りながら考える」はNG – 手戻りが発生して製作期間、コストが増大する。 – そのうえメンテ困難なごちゃごちゃしたコードになる。トラブルの元。
- 9. 9 WordPress基礎講座(5) WordPressコード挿入時の注意点 ● コーディングルールをチェック。 ● リンクは絶対パス。サイト内リンクはWordPressの関数を利用する。 – フルパスを直接書きこんだ場合、ローカルでの動作検証などが行えなくな る。 ● セキュリティにも気をつける。 – 出力用の関数を使う、使えない場合はエスケープ処理をする、など。 ● ぐぐるのも大事だけど、Bad know howも転がっているので公式サ イトもチェックしよう。 – 処理が重くなる弊害もあるからね。 ● 考えてばかりでも埒が明かないのでまずは書こう！
- 10. 10 WordPress基礎講座(5) 必須コード ● </head>の直前あたりに挿入。 – WordPressやプラグインの動作に必要なCSS、 JavaScriptなどの 読み込みコード（link rel=）、 metaタグ等の出力を担当している。 <?php wp_head() ;?> ● </body>の直前あたりに挿入。 – WordPressやプラグインの動作に必要なコードの出力を担当している。 – ログイン時にページ上部に表示される黒帯メニューもこれが出力してい る。 <?php wp_footer() ;?>
- 11. 11 WordPress基礎講座(5) その他のコードの例（ヘッダー部） <html lang=”ja”> → <html <?php language_attributes() ; ?>> <link rel="stylesheet" href="style.css" type="text/css" /> ↓ <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> 解説： language_attributes() <html>タグにテキストの属性、及びそのページの言語情報を構築し、出力します。 公式ディレクトリに登録するテーマには、この関数が入っていないといけません。 echo esc_attr () HTMLタグ内で出力する文字列をエスケープ処理して表示する （echoが表示の命令、esc_attrはエスケープ処理の命令） get_stylesheet_uri() テーマのstyle.cssへのリンクURLを取得する関数 ※スタイルシートの呼び出しリンクは、functions.phpで行うことが推奨されています。
- 12. 12 WordPress基礎講座(5) エスケープ処理について ● XSS（クロスサイトスクリプティング）やSQLインジェクション対策の第一歩。 – XSS：コメントフォームなどで不正なjavascriptコードなどを投稿することでサイトを 書き換えたり、成りすましサイトへのリダイレクト命令などを仕込む。 – SQLインジェクション：コメントフォームなどにPHPコードなどを仕込み、データベー スから情報を盗み出す。 ● 基本的な対策は、プログラムの命令に使われる文字(<,>,&,',”)を、 （<,>,&,&等の文字列に置換して、プログラムとして動作しない ようにさせる。 ● 基本的には、echoなどで何か表示させる時には必ずエスケープさせる。 ● echo等を使わずに文字列を表示させるWordPressの関数は、内部でエス ケープさせているのでそちらを使う。
- 13. 13 WordPress基礎講座(5) エスケープに使うコードの例 esc_attr() HTMLの属性値をエンコード esc_html() テキストをエンコード ※どちらも「<、>、&、"、'」 を「<、>、&、"、 '」に置き換え。 esc_url() URLを出力する際に使います。http, https, ftp, ftps, mailtoなど のホワイトリストに無いURLは拒否し、不正な文字を除去します。 esc_js() 「<、>、&、"、'」と、JavaScriptの呼び出し時のテキストの紐付けをエス ケープします。これはインラインJSでの使用（例えば、onclick=”…”など）を想定して います。 他にもesc_html_e()、esc_textarea()など。 WordPressで、文字列を表示させる関数 例：the_title() はOK。 echo get_the_title() はNG。
- 14. 14 WordPress基礎講座(5) ループ/クエリを使いこなす 例えば･･･ ● トップページにカテゴリごとの最新記事を表示する。 ● ブログ記事の下に関連する他の記事の一覧を表示す る。 ↑既存テーマを使っているだけではなかなか実現でき ない。→自分でコードを書かなければ！ ● WP_Query を使いこなせば実現できる！
- 15. 15 WordPress基礎講座(5) クエリの大雑把な説明 ● WordPressは、index, archive, single, pageなどに必要な情報一式を データベースに問合せ（クエリを発行）、結果を格納庫（変数）に用意する。 1. 記事を書いて登録（記事id=1~） id=1 ・ ・ ・ 記事に関連付けられたデータ id category post_status slug tag post_type title thumbnail author content excerpt その他 例えば、カテゴリアーカイブ「info」のページを作るとき には、category=>'info'に合致する記事データ一式を 拾い出し、グローバル変数の$wp_queryに入れる。 id=1 id=5 id=12 $wp_query
- 16. 16 WordPress基礎講座(5) クエリからページへの出力 ● $wp_queryには、記事やカテゴリのタイトルや投稿者名、記事 本体、サムネイル画像、スラッグ、記事IDなどが入っている。 – pageやsingleでは記事1つ分だけだが、カテゴリ一覧ページなどで は、複数の記事の情報が入る。 ● ループの文は、データを記事ごとに一つずつ取り出し、ページ を作るように指示を出している。 id=5 id=12 $wp_query id=1 if (have_posts()) the_post() title content img title() content() thumbnail() 表示の 命令 構築された ページ
- 17. 17 WordPress基礎講座(5) 2つのクエリ ● メインループ用のクエリと、派生 ループを作るためのクエリがある。 ● 詳しくは公式レファレンスの query postsのページをチェック。
- 18. 18 WordPress基礎講座(5) query_posts()は使わないこと！ ● ぐぐって出てくる情報にはこれを使うものが結構多いので要注意。 – 公式サイトで「query_postsはテーマ内で使うことは想定していないし、 使ってもいいことないから他の方法を探せ」って言ってます。（参照） – WP_Queryかget_postsで必要なデータは取得できる。 ● WordPressが記事作成のために最初に読み込むのが query_postsのクエリ。 ● $wp_queryに既に読み込んだデータをどかして、新たに条件に合 うクエリを読み込む、という手順を取るため処理に時間がかかる。 ● 他にも、ページネーション（「次のページ」などのリンク）が機能しな くなるなど困った事態に直面することになる。
- 19. 19 WordPress基礎講座(5) まとめ ● テンプレートファイルはHTMLで更新の頻繁な所を WordPress関数で置き換えていけばできる。 ● 関数はたくさんあるので、関数レファレンスガイドや検索 で調べる。 ● 検索で必要な関数を見つけたら、公式レファレンスで非 推奨になっていないかを確認する。 ● HTMLなどを出力するときは、出力用の関数が提供され ているときはそれを優先して使う。（内部でエスケープ処 理済のため、効率的。)