こんにちは、福岡のホームページ制作シンス株式会社。WordPressが好きなちゃんけいです。
今回はWebサイト制作の勉強を始めてからHTML/CSSを学んだ上でWordPressの勉強を始めた方向けに、WordPressのテーマ作りで知っておきたい基礎を紹介します。
目次
テーマに必要なファイル
テーマを作る際に最低限入っていないとテーマとして認識されないものがあります。
それがこちらの2つ。
テーマフォルダの直下に必ず忘れないように作りましょう。
- index.php
- style.css
style.cssには、以下の内容を記載します。
管理画面でテーマを選択する際に表示される文言になります。
1 2 3 4 5 6 7 8 | /* Theme Name: テーマ名 Theme URI: テーマの説明があるURL Description: テーマの説明 Version: バージョン Author: 作成者 Author URI: 作成者のURL */ |
ファイルの切り分け
一般的なhtmlと違い、ページによって共通する部分は別ファイルに切り分けて扱います。
ヘッダー・フッターを別ファイルにして、それぞれをheader.phpとfooter.phpにします。
htmlファイルの1行目から複数ページで共通になっている部分をまるっとheader.phpとして保存します。
フッターも同様に、一番下の行から共通の部分までをまるっとfooter.phpとしてください。
別ファイルにしたヘッダー・フッターの表示するには、こちらの関数を記述します。
1 2 3 4 | // ヘッダーを表示したい場所に書く <?php get_header();?> // フッターを表示したい場所に書く <?php get_footer();?> |
head要素とbody要素を閉じる直前には以下の関数を記述してください。
wp_head()
head要素を閉じる直前に<?php wp_head();?>を記述してください
body要素を閉じる直前に<?php wp_footer();?>記述してください。
これで共通パーツが完成しました。
ヘッダーやフッターに変更がある場合は、1つのファイルを修正することで全ページの表示に反映されます。
とても便利ですね。
ファイルのパスとリンク
WordPressでサイトを制作した場合にテーマを置く場所とドメインの読み込む場所に違いが出ます。
正しくパスが通るように調整しましょう。
画像の読み込み場所イメージ
htmlサイトの場合
https://hogehoge.net/images/img01.jpg
WordPressの場合
https://hogehoge.net/wp-content/themes/テーマ名/images/img01.jpg
画像のリンク際はこちらの関数を使います。
1 2 3 4 5 | <?php echo get_template_directory_uri();?> // ↓ 出力 https://hogehoge.net/wp-content/themes/テーマ名 // 使用例 <img src="<?php echo get_template_directory_uri();?>/images/img01.jpg"> |
ページのリンクも同様に、こちらの関数を使うとドメインのURLを取得して表示することができます。
1 2 3 | <?php echo home_url('/');?> // 使用例 <a href="<?php echo home_url('/');?>company/">企業情報</a> |
functions.phpの記述
functions.phpは、プラグインのようにサイトへ機能を追加できるファイルです。2つの機能を追加してみましょう。
the_excerptのカスタマイズ
the_excerpt関数は、ページの本文を抜粋表示できます。記事一覧ページなどでよく使われています。
本文抜粋時の文字数制限を、任意の長さにできるようにカスタマイズします。
日本語の抜粋が指定した数字通りにうまく行かない場合は、プラグインの「WP Multibyte Patch」を使うことで解決できます。
1 2 3 4 5 6 7 8 9 10 | function new_excerpt_mblength($length) { // 100文字制限 return 100; } add_filter('excerpt_mblength', 'new_excerpt_mblength'); // 抜粋後の文末につける文字列を指定 function new_excerpt_more($more) { return '...'; } add_filter('excerpt_more', 'new_excerpt_more'); |
アイキャッチ画像の設定
オリジナルテーマの場合、管理画面にアイキャッチ画像の項目はありません。
なので、アイキャッチ画像を設定できるようにfunctions.phpに記述する必要があります。
add_theme_support関数を使いましょう。
1 2 3 4 5 | function idotdesign_setup(){ // idotdesignの部分は任意の文字列でOK // アイキャッチ画像を有効化 add_theme_support( 'post-thumbnails' ); } add_action( 'after_setup_theme', 'idotdesign_setup' ); // 先に定義した関数名を入れる |
上記2つを書いたfunctions.phpはこのようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php /** * テーマのセットアップ * */ function idotdesign_setup(){ // アイキャッチ画像を有効化 add_theme_support( 'post-thumbnails' ); } add_action( 'after_setup_theme', 'idotdesign_setup' ); /** * 記事本文抜粋表示のカスタマイズ * 使用方法：the_excerpt(); */ function new_excerpt_mblength($length) { // 100文字制限 return 100; } add_filter('excerpt_mblength', 'new_excerpt_mblength'); function new_excerpt_more($more) { // 抜粋後の文末につける文字 return '...'; } add_filter('excerpt_more', 'new_excerpt_more'); |
記事を表示するWP_Queryを使ったループの書き方
WordPressを使う醍醐味と言えば、更新コンテンツの表示です。
今回はWordPressに最初から備わっている「投稿」を表示してみましょう。HTMLはこちらを前提とします。
1 2 3 4 5 6 7 8 9 10 | <p>新着情報</p> <ul class="postList"> <li class="post"><a href="記事のリンク"> <time datetime="0000-00-00">0000.00.00</time> <p>記事タイトル</p> <div class="content"> 記事の抜粋文 </div> </a></li> </ul> |
ループにはWP_Queryを使用します。$argsに記事を表示する条件を指定する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <p>新着情報</p> <ul class="postList"> <?php $args = new WP_Query( array( 'post_type' => 'post' // 投稿タイプのスラッグ 'posts_per_page' => '3' // 表示したい件数 ) ) if ( $args->have_posts() ) : // 記事があるかどうかを判定 while ( $args->have_posts() ) : // 表示件数に達するか、記事がなくなるまで繰り返す $args->the_post(); // 次の投稿へループを進めて、次の投稿を現在の投稿としてセットする ?> <!-- ここに繰り返し表示したいHTML --> <li class="post"><a href=""> <time datetime="0000-00-00">0000.00.00</time> <p>記事タイトル</p> <div class="content"> 記事の抜粋文 </div> </a></li> <?php endwhile; elseif: // 記事がなかった場合 echo "記事が見つかりませんでした"; endif; wp_reset_postdata(); // サブループを使用した場合にグローバル変数$postを復元 ?> </ul> |
最後に記事のタイトルや日時、抜粋文をWordPressの記述に置き換えて完成です！
1 2 3 4 5 6 7 | <li class="post"><a href="<?php the_permalink();?>"> <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time> <p><?php the_title(); ?></p> <div class="content"> <?php the_excerpt(); ?> </div> </a></li> |
まとめ
以上、知っておきたい基礎でした。
説明が複雑な部分はさくっと省略している部分もありますが、それはまたの機会に。
サンプルコードで出てくる関数を調べることで、理解が深まり自分のやりたいカスタマイズ・表示をすることができるかと思います。
それでは、良きWordPressライフを！
売上アップ、人材採用、顧客獲得など様々なご要望に最適なホームページを制作いたします。
