WordPress任意のCSSやJavascriptを読み込む方法 (Bootstrapなど)
こんにちは、のすけです。
WordPressを弄っていると、独自のCSSやJavascriptを使って整えたくなってきますよね。
そんなCSSやJSを作成して変更する方法を紹介します。(デザインについては特に触れません)
簡単だけど諸刃の剣な方法
一番簡単な手法としては、管理画面の[外観] - [CSS編集]からCSSについては編集できます。
この画面では、CSSの変更結果を微調整しながらカキカキできるのが利点で、とても便利なのです。
その他の手法として、[外観]-[テーマ編集]からテーマの「style.css」に追記数する手法もあります。
しかし、問題もあります。
このCSSはテーマの設定値として紐づいているので、テーマを変えると消えてしまいますし
テーマのアップデートで消えてしまったこともあります。
また、テーマ編集については、そもそもこの画面から編集するのは危険です。間違ってからのテキストデータがPOSTされた場合全て消えてしまう可能性もあります。(一度ありました。)
膨大な時間を掛けて構築したCSSが消えてしまうと、もう呆然となってしまいます。。
そのため、Web一般で用いられているように、外部ファイルとして保存されたCSSやJavascriptを利用して編集する手法を取りたいと思います。
ローカルにソースファイルを保持できるので、万が一サーバー上のファイルが消えても復旧可能なので、やはりこっちの方がしっくりきます。
またbootstrapなどの任意のCSSフレームワークを入れたいなんて要望もあるかと思います。
概要
やり方の概要としては「wp enqueue script」関数を利用して、登録を行います。
header.phpに直接書くやり方ももちろんありますが、WordPressの機能を利用して登録していくのが一般的なようです。
関数リファレンス/wp enqueue script - WordPress Codex 日本語版
書き方
以下のように、functions.phpの最後の行に追記します。なお、編集する際にはコピーを取って戻せるようにしてください。
間違って記述するとサイトが動かなくなります。
書き方例:
/** * スクリプトとスタイルを正しくエンキューする方法 */ function load_my_scripts1() { wp_enqueue_style( 'mystyle1', 'url' ); wp_enqueue_script( 'mystyle2', 'url', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'load_my_scripts1' );
``url``にCSSやJavascriptを記述します。
ローカルスクリプトの URL は絶対に直接書き込むべきではない。代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。
とあるため、プラグインフォルダの下のスクリプトやテーマフォルダのスクリプトの場合にはURLを直接書き込まないようにしましょう。
具体的なやり方を次から説明するので、参考にしてください。
CSSやJavascriptの置き場所
テーマを世界中に公開するのでなければ、基本的にどこに置いてもいいと思います。管理しやすい方法が良いと思いますので。
私は、Web一般で用いられている作法で置いた方がわかりやすいと思っています。
wordpressのルートディレクトリの下に「assets」フォルダを作成してその下に「css」ディレクトリ、「js」ディレクトリを新規に作り、それぞれCSSをJavascriptを放り込んでいます。
例えば、CSSフレームワークbootstrapのcssとjsを適用したい場合には、ダウンロードしたソースを、次のように作成したディレクトリに入れます。
置いたスクリプトをWordPressで読み込むように登録する
上記方法で、スクリプトを置いただけではまだ読み込まれません。
次の登録を行います。上で説明したようにwp_enqueue_scriptsを使います。
それではfunctions.phpに書いてみましょう。(必ずファイルのバックアップを取ること)
function load_bootstrap() { wp_enqueue_style( 'bootstrap-css', '/assets/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrap-js', '/assets/js/bootstrap.min.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'load_bootstrap' );
そしてサイトを表示させます。
さらに、本当に読み込まれているか「ChromeのDeveloperツールなど」で確認すると。
ちゃんとassetsディレクトリの下にあるCSSとJSが読み込まれているのが確認できます。
これでデザインも自由自在ですね!
今回はbootstrapを用いましたが、もちろん同じように自作したCSSやJSを設置して反映させることもできます。
またfunctions.phpのURLのところにCDNのURLを入れても読み込ませることができます。
それではまた。
WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。
こんにちは、今回はWordPressのアーカイブ機能カスタマイズしていきます。
アーカイブ表示とは?
そもそも、アーカイブ機能とは何でしょうか?投稿や固定ページとは違ってあまり馴染みのない機能なのではないでしょうか。
でも、実は重要です。
アーカイブとは記事を一覧表示する機能なので、投稿一覧をいい感じに作ることができるものです。
例えば通常、カテゴリーをクリックした際に、そのカテゴリーに属する記事が一覧で表示されると思いますが、そのページがアーカイブページになります。
カテゴリーの他にも、タグや、日付(日別・月別・年別)での結果もアーカイブページになります。
カスタム投稿タイプで新しく別の投稿タイプを作成した時に、それぞれ別のレイアウトの一覧ページを作りたい!なんて要望もあると思います。
例えば通常はリスト表示が多いのですが、これをグリッド形式にしてアルファブログにあるような形に整形することも可能です。
アーカイブページは「archive.php」を作れば良い
それではアーカイブページを作っていきます。
と言っても、アーカイブページの作り方は、固定ページや投稿ページと同じです。
WordPressループを利用し、テンプレートタグを使って必要な情報を揃えていけば良いだけです。
まずは、いつもの基本的な記述で作ってみましょう。
archive.php
<?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h1 class="entry-title"><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> </article> <hr/> <?php endwhile; ?> <?php get_footer(); ?>
そうすると、先ほどのように表示されるテンプレートができました。
ただし、これはアーカイブ特有のタグが埋め込まれていない状態ですので、ここから更にアーカイブ特有のタグを埋め込んでいきます。
アーカイブ特有の機能は次の通りです。
アーカイブページのタイトル:何の括りで一覧化しているかを示すタイトルをつけます
個別投稿ページへのリンク:記事ページへのリンクをタイトルに付ける
記事の抜粋:本文を全文出すのではなく、140文字など適当な文字数のみにする。
ページング:複数の記事が該当した際にページングさせ、前の一覧や次の一覧へのリンクを付ける
アーカイブページのタイトル
次のように条件分岐を利用して、タイトルを表示させると良いです。
<?php if( is_category() ) : ?> echo 'カテゴリー:' . single_cat_title('',false) . 'の投稿一覧'; <?php elseif( is_tag() ): ?> echo 'タグ:'. single_tag_title('',false) . 'の投稿一覧'; <?php elseif( is_day() ): ?> echo get_the_date('Y年m月d日') . 'の投稿一覧'; <?php elseif( is_month() ): ?> echo get_the_date('Y年m月') . 'の投稿一覧'; <?php elseif( is_year() ): ?> echo get_the_date('Y年') . 'の投稿一覧'; <?php endif; ?>
カテゴリのアーカイブタイトルを表示する場合はsingle_cat_title()
タグのアーカイブタイトルを表示する場合はsingle_tag_title()
日付けのアーカイブタイトルを表示する場合はget_the_date(
を使用します。
個別投稿ページへのリンク
h1タグの中身をリンクに書き換えます。
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
記事の抜粋
記事の抜粋を表示するにはthe_excerpt()
を利用します。
<?php the_content(); ?>
と記述して全文表示してしまっているところを、<?php the_excerpt(); ?>
に置き換えます。
なお、アーカイブ表示でサムネイルを表示させるにはthe_post_thumbnail();
を使えば表示できるのですが、テーマがサムネイルに対応している必要があります。
対応させるにはfunction.phpにadd_theme_support( 'post-thumbnails' );
を追記します。
ページング
複数の記事が該当した際にページングさせるには、投稿ナビゲーションthe_posts_pagination()
を使います。
投稿ナビゲーションは配列形式で次のようなパラメータを取ります。
- mid_size:現在のページの左右にそれぞれ表示するページ番号の数。初期値は1
- prev_text:前のページへ遷移するためのリンクに使われる文字列。初期値は「前へ」
- next_text:次のページへ遷移するためのリンクに使われる文字列。初期値は「次へ」
- screen_reader_text:読み上げ用のテキスト。初期値は「投稿ナビゲーション」
使用例はこちら。screen_reader_textは表示されないように半角スペースを入れました。
<?php the_posts_pagination( array( 'mid_size' => 1, 'prev_text' => '前へ', 'next_text' => '次へ', 'screen_reader_text' => ' ' ) ); ?>
カスタム投稿タイプにも一覧機能をつけたい
これまでは、通常の投稿の際のやり方でした。しかし、カスタム投稿タイプは別の方法が必要になります。
「archive-{slug}.php」のファイルを作れば良いだけかな?と思ってやってみると上手くいきません。
通常の投稿タイプの一覧が表示されてしまいます。
試しにslugが「blog」の場合の「archive-blog.php」でやってみます。
実際に作って確認してみましょう。今までの機能を全部乗せしたバージョンを作成していきます。
archive-blog.php
<?php get_header(); ?> <h1>カスタム投稿タイプblogの、<?php if( is_category() ) : echo 'カテゴリー:' . single_cat_title('',false) . 'の投稿一覧'; elseif( is_tag() ): echo 'タグ:'. single_tag_title('',false) . 'の投稿一覧'; elseif( is_day() ): echo get_the_date('Y年m月d日') . 'の投稿一覧'; elseif( is_month() ): echo et_the_date('Y年m月') . 'の投稿一覧'; elseif( is_year() ): echo et_the_date('Y年') . 'の投稿一覧'; endif; ?></h1> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div> <?php the_excerpt(); ?> </div> </article> <hr/> <?php endwhile; ?> <?php the_posts_pagination( array( 'mid_size' => 1, 'prev_text' => '前へ', 'next_text' => '次へ', 'screen_reader_text' => ' ' ) ); ?> <?php get_footer(); ?>
WP_Queryでカスタム投稿を取り出す!
上記コードのWordPressループの部分を変更して、カスタム投稿タイプの記事のみ取得するようにカスタマイズします。
<?php get_header(); ?> <h1>カスタム投稿タイプblogの一覧<?php if( is_category() ) : echo 'カテゴリー:' . single_cat_title('',false) . 'の投稿一覧'; elseif( is_tag() ): echo 'タグ:'. single_tag_title('',false) . 'の投稿一覧'; elseif( is_day() ): echo get_the_date('Y年m月d日') . 'の投稿一覧'; elseif( is_month() ): echo et_the_date('Y年m月') . 'の投稿一覧'; elseif( is_year() ): echo et_the_date('Y年') . 'の投稿一覧'; endif; ?></h1> <?php $args = array('post_type' => 'blog'); $query = new WP_Query($args); while ( $query->have_posts() ) : $query->the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div> <?php the_excerpt(); ?> </div> </article> <hr/> <?php endwhile; ?> <?php the_posts_pagination( array( 'mid_size' => 1, 'prev_text' => '前へ', 'next_text' => '次へ', 'screen_reader_text' => ' ' ) ); ?> <?php get_footer(); ?>
説明:WordPressループの前にWP_Query()
を利用して、カスタム投稿タイプ「blog」の投稿を取得してきます。
そして、それを$query
に入れて、そこから表示しています。
このあたりわからない場合にはこちらの記事を見るといいですよ。
そして、URLにサイトタイトルの後に「?post_tyle=blog」というパラメータを渡してやると表示されます。 http://localhost:8888/localtest/?post_type=blog
なお、この一覧ページはナビメニューを表示させて、設定することもできます。
外観設定からメニューを作って、そこにblogの一覧を設定します。
また、合わせてheader.phpの任意の場所にナビメニューを表示する次のコードを挿入します。
<div class="access"> <?php wp_nav_menu(); ?> </div>
上記の表示例の左上にメニュー[blogs一覧]が表示されているかと思います。
以上です。
これでカスタム投稿タイプ別に自由に一覧ページを作成することができますね!
個別投稿ページで利用できるテンプレートタグまとめ
日付系タグ
the_date() :公開日時を表示。一覧の場合は最初の1記事しか表示されない。
the_modified_date():更新日時を表示
the_time():一覧表示で日付を表示する場合はこちらを利用
<?php the_time('Y/m/d'); ?>
や
<?php the_time('Y年m月d日'); ?>
のように日付タグは()中にフォーマットを指定することができます。
echoを使ったやり方
<?php echo get_the_date(); ?>
このようにechoを使ってgetメソッドで取得した値を表示させる方法もあります。
利点としては、the_date() と違い何度も利用できます。
カテゴリーの表示タグ
- the_category():カテゴリーの表示
利用例:<?php the_category(); ?>
初期表示ではリストになります。(「ねこ」と「いぬ」カテゴリに属している例)
<ul class="post-categories"> <li><a href="http://localhost:8888/localtest/?cat=2" rel="category">ねこ</a></li> <li><a href="http://localhost:8888/localtest/?cat=1" rel="category">いぬ</a></li> </ul>
<?php the_category(', '); ?>
このように()内に複数のカテゴリに属していた場合の区切り文字を指定できます。
また、get_the_category()
を使うことで次の情報を取得できます
term_id:カテゴリーID
name:カテゴリー名
slug:カテゴリースラッグ
description:カテゴリーの説明
parent:親カテゴリーID
count:そのカテゴリの投稿数
利用例はこちら
<?php $cat = get_the_category(); if(isset($cat[0])){ $cat = $cat[0]; echo( '<a href="?cat=' . $cat->term_id . '">'. $cat->name .' </a>'); } ?>
タグの表示
- the_tags():タグをリンク付きで表示する
利用例:<?php the_tags(); ?>
また、get_the_tags()
を使うことで次の情報を取得できます
term_id:タグID
name:タグ名
slug:タグのスラッグ
description:タグの説明
count:そのタグの投稿数
利用例はこちら
<?php $tag = get_the_tags(); if(isset($tag[0])){ $tag = $tag[0]; echo( '<a href="/?tag=' . $tag->slug . '">'. $tag->name .' </a>'); } ?>
著者の表示
- the_author():著者を表示する
利用例:<?php the_author(); ?>
前後の記事へのリンクを表示する
previous_post_link():前の記事のリンクを表示
next_post_link():次の記事へのリンクを表示
利用例:<?php previous_post_link(); ?>
利用例:<?php next_post_link(); ?>
こんな感じでHTMLタグで挟む方法もあります。
<?php previous_post_link('<li class="nav-prev">%link</li>'); ?> <?php next_post_link('<li class="nav-next">%link</li>'); ?>
ページ分割した記事を表示する
- wp_link_pages():ページ分割された記事のページングを表示
WordPressでは長い記事の場合には、「続きを表示する」などの表記を入れてそれ以降の表示を短縮することができます。
記事の編集画面で本文中に<!--nextpage-->
を入れると、その箇所で記事をページ分割することができます。
この分割された記事のページングを表示するためにwp_link_pages()を利用します。
このタグはループ内で使用する必要があります。
利用例:
<?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h1 class="entry-title"><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php wp_link_pages(); ?> </article> <?php endwhile; ?>
以上です。
次回はアーカイブページを作成します。
WordPressテーマの投稿ページのテンプレートを作成する
こんにちは、前回は固定ページのテンプレートを作成しました。
今回、第11回目は投稿ページのテンプレートを作成していきます。
投稿ページのテーマの作成方法
投稿ページはWordPressで定期的な記事の投稿時に利用する機能です。ブログ機能とも言えますが、投稿タイプを増やすことで様々な投稿に対応しています。
今回はこの投稿ページのテンプレートの作成方法をご紹介します。
投稿ページのテンプレートを作成することで、その他のページと独立して自由にデザインを設定することができます。
テンプレートファイル名は予め決まっており「single.php」になります。
もしテーマの中にsingle.phpがある場合、投稿ページを表示する際の挙動が、index.phpよりもsingle.phpの方が表示優先度が高くなります。
この仕組みを利用して、投稿ページのテンプレートを作ります。
それでは実際に書いて見ましょう。 「single.php」というファイル名でテーマ直下に新規作成し、次のようにコードを記載します。
single.php
<?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>:single.phpによる投稿ページ</h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?>
固定ページとほぼ一緒です。 実は、その他にヘッダーやフッター、サイドバー、などの表示も一緒です。
詳しくはこちらを参照ください。
投稿ページのデザインの使い分ける方法
このままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。 しかし、例えば別の投稿タイプの時にデザインを変えたい場合はどうすればいいのでしょうか。 (例:ブログ、プレスリリースなど)
そこで、WordPressでは固定ページと同様に投稿ページ毎にデザインを変える方法が2つ用意されています。
- ページ毎に違うidやclassを自動的に埋め込む
- 投稿タイプ毎にページテンプレートを作る
投稿ページのテンプレート階層は次の通りです。
このように、投稿タイプ(post_type)毎にテンプレートを作ることができます。
それでは試しに、作成しましょう。
カスタム投稿タイプを作る
カスタム投稿タイプを作る一番簡単な方法は、プラグイン「Custom Post Type Ui」を入れることです。
プラグインの新規追加画面から「Custom Post Type Ui」で検索してインストールし有効化します。
次に、管理画面に「CPT UI」という項目ができているので、そこから「投稿タイプの追加と編集」を押します。
今回はカスタム投稿タイプ「blog」と増やしたいと思います。
このように入力して、「投稿タイプと追加」ボタンを押して登録完了です。
管理画面のメニューに「投稿」の他に「blog」のメニューが追加されているかと思います。ここから記事を追加することができます。
カスタム投稿タイプ用のテンプレートを作成する
カスタム投稿タイプ「blog」ができたので、これに対応するテンプレートを作成します。
ファイル名は「single-blog.php」です。 内容は次のようにします。
single-blog.php
<?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>:single-blog.phpによる投稿ページ</h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?>
そして、試しにblogの記事を1つ書いて、表示させてみます。
このような感じで、投稿タイプ毎にテンプレートを設定することができました。
本日は以上です。 次回は、個別ページで利用できるテンプレートタグをいくつか紹介します。
WordPressテーマの固定ページのテンプレートを作成する
こんにちは、今回はWordPressのテーマの固定ページを作成またはカスタマイズする方法を紹介します。
前回はコンテンツん出し方でWordPressループについて触れました。 今回は第9回目、前回の実践編という位置付けです。
- 固定ページのテーマの作成方法
- 共通のヘッダーやフッターを付ける
- 共通のサイドバーを付ける
- 固定ページのデザインの使い分け
- 固定ページ用のページ毎に違うidやclassを自動的に埋め込む
- 固定ページテンプレートを複数作る
固定ページのテーマの作成方法
固定ページはWordPressで定期的な記事の投稿ではなく、トップページや会社概要などの静的情報を表示したい時に利用する機能です。
この固定ページのテーマの作成方法をご紹介します。
まず、固定ページのテンプレートファイルを作成することで実現します。
ファイル名は予め決まっており「page.php」になります。
もしテーマの中にpage.phpがある場合、固定ページを表示する際の挙動が、index.phpよりもpage.phpの方が表示優先度が高くなります。
この仕組みを利用して、固定ページのテンプレートを作ります。
それでは実際に書いて見ましょう。
page.php
<?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>:page.phpによる固定ページ</h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?>
このようにWordPressループを利用して書くだけですね。 page.phpであることが判別できるようにh1タグの中に「:page.phpによる固定ページ」という文を入れています。
index.phpに固定ページの際の挙動を書く際には、次のようにif文で条件分岐させていましたが
<?php elseif(is_page()) : ?><!-- 固定ページの時 --> <?php endif; ?>
page.phpは固定ページを開いた時のみ表示されるためifによる条件分岐は省略することができます。
この状態で固定ページを表示するとこのようになります。
共通のヘッダーやフッターを付ける
上記コードでは、ヘッターやフッターがありませんので、付けてみたいと思います。
page.php
<?php get_header(); ?> <div id="primary" class="main"> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>:page.phpによる固定ページ</h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> </div> <hr/> <?php get_footer(); ?>
header.phpよ呼び出すコード<?php get_header(); ?>
と
footer.phpを呼び出すコード<?php get_footer(); ?>
を書くだけです。
表示例はこちら
共通のサイドバーを付ける
あまり付けることは無いと思いますが、サイドバーを付ける場合はこんな感じです。
page.php
<?php get_header(); ?> <div id="primary" class="main"> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> </div> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?>
サイドバー文のレイアウトと作るdivタグなどを用意して、<?php get_sidebar(); ?>
でsidebar.phpを書けば良いです。
固定ページのデザインの使い分け
このままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。
しかし、このままでは固定ページを複数作った際に(例:会社概要ページ、事業内容紹介ページ、商品紹介のランディングページなど)、ページ毎にデザインを変えることができないかと思います。
そこで、WordPressでは固定ページ毎にデザインを変える方法が2つ用意されています。
- ページ毎に違うidやclassを自動的に埋め込む
- 固定ページテンプレートを複数作る
1つ目の手法は、HTMLは極力変えずに構造は残したまま、CSSのみでデザインを整える場合。 2つ目の手法は、HTMLも変えて丸っ切り別のページにする場合です。
「会社概要ページ」と「事業内容紹介ページ」は手法1の同じHTMLで作成し、 「商品紹介のランディングページ」は手法2の丸っ切り作るなど、合わせ技を使う方法も良くあるかと思います。
固定ページ用のページ毎に違うidやclassを自動的に埋め込む
最初の状態のページにidやclassを付加させていきたいと思います。
page.php
<?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h1><?php the_title() ?>:page.phpによる固定ページ</h1> <div> <?php the_content(); ?> </div> </article> <?php endwhile; ?>
id="post-<?php the_ID(); ?>"
で記事のIDを表示してarticleタグのidとして利用しています<?php post_class(); ?>
で自動的に規定のclassを設定しています。
idは何となくわかると思いますが、実際にclassは何が付くのでしょうか。 chromeの開発者ツールで確認してみたいと思います。
この固定ページのIDは2なのですが、classは次のようなものが付きました。
post-2
page
type-page
status-publish
hentry
記事毎にデザインを変えたい場合には「post-2」のようなidまたはclassを利用し、固定ページ全般に設定したい場合には「page」や「type-page」を利用し、記事ステータス毎に変えたい場合には「status-publish」を使っていけば良いかと思います。
また最後の「hentry」ですが実はこれはかなり厄介で、このclassを書いたならばしなくてはいけないことがあるようです。
http://kishinoko.lovepop.jp/web/hentry.html
microformatsと言う規格で「hentry」タグについて規定されており、このタグを書く場合には併せて次の情報も必要になります。
- entry-title :(記事のタイトル:必須項目)
- updated: (記事の更新日:必須項目)
- author: (記事の著者:必須項目)
これをしないとGoogleの検索エンジンにページ内のエラーとして検出されてしまうようです。適切に作られていないWordPressのテーマなんかには多いみたいです。 そのため、次のように該当箇所に上記classを割り当てる必要があります。
page.php
<?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h1 class="entry-title"><?php the_title() ?>:page.phpによる固定ページ</h1> <div> <?php the_content(); ?> </div> <p>更新日:<?php the_modified_date('Y/m/d') ?></p> <p class="author" style="display:none;">hollywis</p> </article> <?php endwhile; ?>
更新日は<?php the_modified_date('Y/m/d') ?>
で取得できます。
また、表示させたく無い場合にはstyle="display:none;"
で非表示にさせてしまえば良いかと思います。
固定ページテンプレートを複数作る
次の、HTML構造も新しく作り直したい場合に移りたいと思います。
この場合は、別のファイルを作成するのですが命名規則に2つの選択肢があり、次の通りです。
そのほか、カスタムテンプレートを作る方法もありますが、ここでは割愛します。
slug(スラッグ)というのは、個別ページや固定ページの識別子のことで、主にURLの一部として利用されます。 管理画面では「表示オプション」から「スラッグ」にチェックを入れると確認することができます。
なお、表示の優先順位はIDの方が高いため、どちらもある場合にはIDの方が表示されます。
このように固定ページのテンプレート表示順は、カスタムテンプレート、page-{ID}.php、page-{slug}.php、index.phpとなります。
それでは試しに、スラッグでのページ作成を行ってみます。 ファイルを新規作成し、スラッグ名が「sample-page」のテンプレート「page-sample-page.php」を作ります。
コードは少し改変して次の通りです。
<?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <h1 class="entry-title"><?php the_title() ?>:page-sample-page.phpによる固定ページ</h1> <div> <?php the_content(); ?> </div> <p>更新日:<?php the_modified_date('Y/m/d') ?></p> <p class="author" style="display:none;">hollywis</p> </article> <?php endwhile; ?>
そして該当のページを開くと
この通り表示されました。
以上で、固定ページの表示を終わります。 次回は個別ページのテンプレートを作成していきます。
WordPressループってなんぞや?コンテンツ表示に欠かせないお話
こんにちは、のすけです。
大学で非常勤講師などをやらせていただいているのですが
その繋がりで大学時代の教授との縁が復活するなど、 世間は狭いなと思う今日この頃です。
本日はWordPressカスタマイズの第8団「WordPressループってなんぞや?」です。
- WordPressループとは?
- どこでWordPressループは使われているの?
- なぜループが必要なの?
- WordPressループを使ってwp_queryからデータを取り出す方法
- 追加WP_QUERYについて
ちなみに、前回はWordPressで利用すつタグを紹介しました。 これだけは覚えよう!WordPressテンプレートタグ! - hollywis's diary (はりうすブログ)
WordPressループとは?
僕自身はRuby on RailsやNode.jsでプログラムを書くことが多いのですが
そんな、Web畑出身の人が何これ?と思うのがWordPressループではないでしょうか。
何かと言いますと、端的に言うと、コンテンツを表示する時にwhile文を書いて、その中で記事情報を取得し表示までする仕組みのようです。
ちょっと良くわからないですよね。 普通にコンテンツを取ってきて表示すればいいじゃ。。。と思ってしまう。なぜわざわざループさせているのか。 しかもwhileの無限ループを使うなんてバグが出そうな怖い技を使って。。。
そんなにwhile文なんて使いませんからね。組み込み系のプログラム(Arduinoとか)じゃあるまいし。と思ってしまいます。
どこでWordPressループは使われているの?
まず、利用例を紹介します。
以前、書いたindex.phpとstyle.cssだけで作る最小のテーマを例にします。 hollywis.hatenablog.com
詳しくは↑を見てください。
この中で、index.phpにメインページの時、投稿ページの時、固定ページの時のコンテンツの出しわけを行っている部分があります。
<?php if(is_home()) : ?><!--メインページの時 --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="entry"> <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry-body"> <?php the_content(); ?> </div> </article> <?php endwhile; endif; ?> <?php elseif(is_single()) : ?><!-- 投稿ページの時 --> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> <?php elseif(is_page()) : ?><!-- 固定ページの時 --> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?>
その中で、それぞれのif文の中に while ( have_posts() )
からendwhile;
の記述があるかと思います。
ここがWordPressループ。ループの中ではリンクURLを取得するthe_permalink()
や、ページのタイトルthe_title()
、本文を取得するthe_content()
を
呼び出しています。
特にthe_content()
はWordPressループの中でしか機能しません。while
文の外で実行するとエラーになります。
なぜループが必要なの?
(ここに呼び出しの図をいずれいれたい)
WordPressはページのリクエストを受け付けると、URLからメインページなのか、投稿ぺージなのか固定ページなのかなどを判断します。 そして、記事の情報をデータベースから取得して、該当するテンプレートファイルを読み込みます。
このデータベースからデータを読み込む際に、記事の情報は$wp_query
という変数に格納されます。
しかし、この状態では表示できる状態にはありません。なぜならなんと、$wp_query
は配列みたいな形式らしいのです。(厳密には配列ではない)
そのため、$wp_query
から記事を順に取り出して表示する方式が取られます。
投稿ページや固定ページでは、もちろんそのページ1ページ分の情報しか$wp_query
に格納されていないため、
実際にはWordPressループであるwhile文は1回しか回りません。
しかし、メインページなど記事の一覧を表示する際には、投稿されている記事の数だけ$wp_query
に格納されている訳ですから何度もループが周り、コンテンツが表示されるという事です。
お気づきになったかと思いますが、一覧ページでは実際にはタイトルや記事の最初の数文字程度の配列が取得できればいいとしても、全ての本文を取得しているという事です。
もし、その1記事1記事の本文の内容が多い場合には、膨大なデータをデータベースから取得して、それを表示する訳ですから、一覧ページのレスポンスは遅くなる設計になっているのではと邪推してしまいます。この辺り汎用性を求めたがうえのWordPressのざっくり設計が気になってしまったりしますね。
もしかしたら上手い事やっている可能性はありますが。
ともあれ、この仕組みの事をWordPressループと呼んでいるようです。
WordPressループを使ってwp_queryからデータを取り出す方法
<?php if(is_home()) : ?><!--メインページの時 --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="entry"> <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry-body"> <?php the_content(); ?> </div> </article> <?php endwhile; endif; ?>
上記例にあるように、have_posts()
関数、the_post();
を使います。
その上のif文はページの判別なので今は無視してください。
まず、 if ( have_posts() )
で表示するコンテンツ内容があるか確認します。 if ( have_posts() )
はwp_query
の中身を見に行っているんですね。
そして、もしhave_posts() がブール値でtrueであれば、while文に突入します。
このときwhileの発動条件がまたしてもhave_posts()
です。そして、have_posts()
ループの中で利用できるthe_post()
を呼び出しています。
the_post()とは
それではWordPress Cedexを確認してみましょう。
ループを次の投稿へ進めます。 次の投稿を取得して、それを「現在の投稿」としてセットアップし、ループの 'in the loop' プロパティを true にします。
参考:「現在の投稿」はループの中で the_title() や the_content() 等が対象とする投稿です。
by WordPress Cedex
つまり、wp_query
から順番に投稿を取り出しているのがthe_post()
という訳ですね。
すると、the_title()
やthe_content()
などの内容が取り出している投稿のものに変更されるという事です。
だから、whileループ中で、タイトルthe_title()
や本文the_content()
を呼び出すだけで、順々に投稿が表示されます。
なるほど納得ですね。
WordPressループはこれでもう怖くありません。
追加WP_QUERYについて
$wp_query
はクエリ形式でWP_QUERYという関数を使ってデータを取り出せます。
そして、取り出す為に独自のクエリが用意されています。 利用できるクエリはこちらを確認ください。
つまり、個別投稿ページでは自動的にこのクエリを利用してWP_QUERYから投稿を1個に絞り、その結果を$wp_queryに格納している。 固定ページではWP_QUERYから固定ページを1個に絞り、その結果を$wp_queryに格納している。メインページでは、例えば最近の5記事などを取得するクエリをWP_QUERYで取得し、その結果を$wp_queryに格納しているという訳ですね。
また、自動的に取ってくるだけでなく、ページ中に任意に以下のように記述するとこで、WP_QUERYから直接記事を取得する方法があります。
// The Query $the_query = new WP_Query( $args ); // The Loop if ( $the_query->have_posts() ) { echo '<ul>'; while ( $the_query->have_posts() ) { $the_query->the_post(); echo '<li>' . get_the_title() . '</li>'; } echo '</ul>'; /* Restore original Post Data */ wp_reset_postdata(); } else { // no posts found }
こんな感じで$args
にクエリを記述して$the_query
に取得結果を格納する事で、have_posts()
の記述を$the_query->have_posts()
に変えるだけで、いつも通り自在に記事情報を取得できたりします。
便利ですね。
次回は最小テーマを拡張して、固定ページpage.phpを作っていきたいと思います。
ではまた。
これだけは覚えよう!WordPressテンプレートタグ!
こんにちは
前回は、Wprdpressテーマを一般的なheader.php、sidebar.php、footer.php、index.phpに分割して構造化しました。
この中でphpファイルの記述中にいくつかテンプレートタグを利用してきましたので、そのテンプレートタグを深堀していきたいと思います。
なお、最小のテンプレートを作る際に利用したコードが次のような感じでした。
ファイル:index.php
<!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード:UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> <?php wp_head(); ?><!--headの追加コード --> </head> <body> <header class="site-header"> <h1><?php bloginfo('name'); ?></h1> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap"> <!-- このあたりから上の行をheader.phpに切り出すのが一般的 --> <div id="primary" class="main"> メイン部分 <?php if(is_home()) : ?><!--メインページの時 --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="entry"> <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry-body"> <?php the_content(); ?> </div> </article> <?php endwhile; endif; ?> <?php elseif(is_single()) : ?><!-- 投稿ページの時 --> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> <?php elseif(is_page()) : ?><!-- 固定ページの時 --> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> </div> <aside id="scecondary" class="site-side"> サイドバーをここに記述 <!-- (sidebar.phpに切り出すのが一般的)--> </aside> </div> </div> <!-- このあたりから下の行をfooter.phpに切り出すのが一般的--> <footer class="site-footer"> フッターをここに記述 </footer> <?php wp_footer(); ?><!--footerの追加コード --> </body> </html>
今回は、テンプレートの中で利用できるテンプレートタグをいくつか紹介します。
一般的なテンプレートタグ
まず基本となる記事中に利用できるテンプレートタグを羅列します。
blogingo():ブログの基本情報を表示する
the_title():投稿タイトルを表示する
the_content():投稿内容を表示する
the_date():投稿の日時を表示する
wp_list_categories():カテゴリーの一覧を表示する
特にthe_title()とthe_content()については、WordPressループの中で利用するものになります。
インクルードタグ
別ファイルに書き出して、それを共通パーツとして利用するインクルードタグを紹介紹介します。
get_header():ヘッダーテンプレートの読み込み
get_footer():フッターテンプレートの読み込み
get_template_part():その他のテンプレートの読み込み
get_header()はheader.phpをget_footer()はfooter.phpを呼び出します。
get_sidebar()はsidebar.phpを、get_template_part()は指定したテンプレートを読み込みます。
get_template_part() 利用例:
予めテーマに {$slug}.php ファイルを用意しておく必要があります。
<?php get_template_part( $slug ); ?>
条件分岐タグ
if文などで利用すると便利な条件分岐タグです。特定のページの際の処理を書き込む時に利用します。