デザイナー達の「トリクリ塾」 ~トリクリブログ~

2017年10月3日

WordPress テーマとプラグインを徹底解説 第4回 WordPressループとプラグイン

こんにちは!瀬口理恵です。
前回の記事ではfunctions.phpcssjsの読み込みを行ったりパーツテンプレート化のお話をしました。
今回はWordPressテーマ作成に欠かせないWordPressループや、プラグインについてです!

 

WordPressループって?

具体的な例を出して説明しますね。

例えば、サイトTOPページでよく見かける、新着情報や最新記事のリスト。

 

日付の新しいものが上に来て、日付とタイトルとアイキャッチ画像、本文の一部が表示されています。
WordPressの「投稿」から新しい記事を書いて、更新ボタンを押すとこの最新記事リストも更新される、この部分にはWordPressループが使われています。

ループという名前の通り、WordPressの投稿の中にあるデータを繰り返し表示するわけです。
実際にソースコードをご紹介します。

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

//ループで表示させるものを記述
<?php endwhile; ?>

<?php else: ?>

//表示するものがない場合の表示
<?php _e('記事がありません。'); ?>
<?php endif; ?>
​

 

まず始めのif文(条件分岐)have_posts()」で、表示させるデータがあるかチェックしています。
次のwhile文(ループ処理)の繰り返し条件に「have_posts()」を使用し、表示させるデータがある場合はループします。
the_post()」でデータを取り出してループ、を繰り返し、最後まで取得と表示が終わればそこでループ終了です。

テーマ作成時必ず出てくる基本的な定型文ですので覚えてしまいましょう。

上記定型文の中のループで表示させるものとして、投稿記事タイトルと本文を出力してみます。

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	<h1><?php the_title(); ?></h1>
	<p><?php the_content(); ?></p>
<?php endwhile; ?>

<?php else: ?>

//表示するものがない場合の表示
<?php _e('記事がありません。'); ?>
<?php endif; ?>
​

 

the_title()」でタイトルを、「the_content()」で本文を出力しています。
サンプルではh1タグpタグを使っていますが、ここは自身がコーディングしたHTMLソースに合わせてください。
HTMLphpが混在することに最初は慣れないですが、静的コーディングをした状態のものをベースに、「動的に変わるところだけ」をphpソースコードに置き換える、というイメージです。

例えば

<h1>ここにタイトルが入ります</h1>
​

 

のようにコーディングしていたとすれば、そのダミーテキストの部分をタイトルが出力されるWPタグに置き換えるという具合です。

日付は「the_date()」を使って出力できますので、<?php the_date(); ?>とするとその投稿記事が更新された日付を表示できます。

最新記事リストのように記事にリンクをさせる場合は、「the_permalink()」を使います。

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
​

このように記述すると、タイトルが表示され、そのタイトルに記事URLのリンクが貼られます。

慣れないうちはテンプレートファイルを編集し保存する度に、実際にブラウザで出力結果を確認すると良いですよ。
ブラウザでページ画面のどこかを右クリック→ソースコードを表示とすると確認できます。

このようにphpで書いた部分がどのように出力されているかひとつひとつ確認しながら進めると混乱が起きにくいです。
Codexにも詳しく解説されていますので是非読んでみてくださいね。

https://wpdocs.osdn.jp/ループ

 

プラグインを使ってみよう

WordPressはプラグインを利用して機能を簡単に導入したり運用を便利にしたりと、お手軽に拡張できるのも魅力のひとつです。

プラグインもテーマと同じく、公式プラグインの中から選択するようにしましょう。

https://ja.wordpress.org/plugins/

 

プラグインインストールは管理画面>プラグインから、新規インストール→有効化で行えます。
とても簡単ですが、闇雲にインストールすると動作が重くなったり管理しきれないなどメンテナンス性が落ちますので、厳選するようにしましょう。

以下、プラグインをいくつか紹介します。

 

MW WP Form
https://ja.wordpress.org/plugins/mw-wp-form/

確認画面付きのメールフォーム

 

Yoast SEO
https://ja.wordpress.org/plugins/wordpress-seo/

SEOに関する多機能プラグイン

 

TinyMCE Advanced
https://ja.wordpress.org/plugins/tinymce-advanced/

記事投稿画面のエディタをカスタマイズ

 

EWWW Image Optimizer
https://ja.wordpress.org/plugins/ewww-image-optimizer/

画像をアップロードをする度に自動で画像を最適化

 

Login rebuilder
https://ja.wordpress.org/plugins/login-rebuilder/

WordPressログイン時のURLをカスタマイズ

 

制作するサイトによって導入するプラグインは様々かと思いますので、是非いろいろ試してみてください!

 

最後に

WordPressについて計4回の連載記事もこの記事で終了になります。
これから始めてみよう、難しくて勉強が止まってしまっている、といった方への少しでも手助けになれていれば幸いです。

WordPressは国内で使われているCMSとしてダントツでシェアも高く、事例も非常に多いです。
この連載では書ききれなかったことも多々ありましたが、書籍やWebサイトでも是非学んでみてください。

また、WordPressがこれだけ使いやすく豊富なテーマやプラグインがある背景には、WordPressに貢献している開発者の存在があります。

WordPressに慣れたら次は、公式テーマ作りにチャレンジしたり、翻訳をしてみたり、またはコミュニティに参加してWordPressを盛り上げていきましょう。

 

それでは皆様の素敵なWordPressライフを!

瀬口理恵

ライター:瀬口理恵

約7年間制作会社などでウェブデザイナー、ディレクターとして過ごし、2010年に独立。ウェブサイト制作、アプリUIデザインなどを手がける。女性向けデザインが得意。
隔週火曜のUstream番組「rie’sCafebar」パーソナリティーとして放送中。著書に「美しいウェブサイトの作り方」(SBクリエイティブ)。

この記事を気に入ったらシェアお願いします

  • いいね
  • ツイートする
  • Lineで送る
お仕事を探す

最新記事

カテゴリー

アーカイブ

タグ

求人検索

×
フリーワード検索
地域から探す
働き方
職種
WEB
DTP
ゲーム・3D
その他
さらに条件を絞り込む
こだわり条件
時給

お仕事情報を絞り込む

あなたとマッチしたお仕事があれば
スグに情報をお知らせします!

トリサンクリエイターに集まる求人情報を 受け取る

06-6314-6001

受付時間 9:30~18:30(平日)

今なら

週3日のお仕事がすぐみつかります

扶養範囲内OK!

お友達紹介 キャンペーン

3000円のギフト券プレゼント

トリクリ塾
トリクリ塾「ゲーム会社探訪編」
過去の開催セミナー

トリサンクリエイター

はじめての方へ

初めての方へ

トリサンクリエイターは、
「デザイナーが、
デザイナーで一生、生きる。」
そのための新しい働き方を
作る専門家です。

トリサンクリエイターとは
株式会社トリサン | 注目の西日本ベンチャー100