BLOG
ブログ

2020.08.19

WordPress(ワードプレス)カスタマイズ例 その1 【記事一覧表示とそれに関する投稿内容の表示】

お久しぶりです。WEB制作チームのウサミです。
前回はワードプレスの利便性について触れましたが今回はその WordPress(ワードプレス)を掘り下げて、どこまでカスタマイズ出来るのかを紹介させていただきます。

前回の記事で WordPress(ワードプレス)はビジュアル面、サイト更新システム面でカスタマイズがしやすいという話をしましたが、あまり詳細については触れていませんでした。
ですので、今回はそこをより細かく紹介していこうと思います。
その第一弾として記事一覧とそれに付与する事ができる投稿内容の表示について紹介いたします。

1.記事一覧表示

WordPress(ワードプレス)はそのサイト作成者の意図によって様々な条件で絞って記事一覧を表示することが出来ます。
もちろん表示する箇所は作成者の意図に合わせて変えることも出来ます。

<?php
//※一覧作成例(newsカテゴリーがある場合にnewsの一覧を表示します。)
$arg = array(
        'category_name' => 'news’
);
$query = new WP_Query($arg);
?>
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

//ここに表示したい投稿内容を記入します。

<?php endwhile;?>
<?php endif; ?>

上のようなコードを設定・カスタマイズする事によって下に書いてあるような一覧を表示することが可能です。

お知らせ記事、ブログ記事一覧

お知らせやブログのような記事ページ(投稿ページ)を一覧で表示することが出来ます。

新規ページ一覧

お知らせ、ブログなどを問わず、新規作成したページを一覧で表示することが可能です。
サイト更新時にどのページが新しく出来たのか容易に確認できます。

カテゴリー一覧、タグ一覧

カテゴリーやタグに合わせた一覧を表示することが出来ます。
お知らせやブログなどのカテゴリーの枠に縛られずに一覧が作れます。

例)商品一覧、施工実績一覧、メディア(画像)一覧

指定記事一覧

特定の記事を指定して一覧を作ることが可能です。
特に表示したい記事などを表示します。

ランキング一覧

閲覧数の大小で区別し一覧を表示します。
ランキング一覧等で使えます。
※ワードプレスに最初から入っている機能ではないですが、多少テンプレートファイルを弄れるユーザーであれば入れることは可能です。

おすすめ一覧

今読んでいる記事ページとの関連度に合わせて記事を表示することが出来ます。
※ワードプレスに最初から入っている機能ではないですが、プラグイン等を弄れるユーザーであれば入れることは可能です。

特定の月の記事のみ表示

特定の月の記事のみ表示出来ます。
期間限定のイベント等で使えます。

上記に書いた一覧の他にもアイディア次第でさらなるカスタマイズが可能です。
ちなみに上記の条件を組み合わせ、まったく別の一覧を作ることも可能です。

基本的な一覧記事作成用プラグイン WP Show Posts(外部リンク)

一覧記事作成に便利なプラグインです。
簡単な一覧記事であればこのプラグインで作成することが可能です。
サイト自体は英語ですが、WP Show Postsで調べると設定の仕方を紹介しているサイトが複数出てきますので、そちらも合わせて参照下さい。
その他にも一覧記事を作成するプラグインは複数存在するので自分のカスタマイズしたい内容と合うプラグインを探してみるのもいいと思います。

https://ja.wordpress.org/plugins/wp-show-posts/

※プラグインはワードプレスを入れているサイトから直接ダウンロードすることも可能です。

2.投稿内容の表示

記事ページや記事一覧に表示する投稿内容をカスタマイズする事が出来ます
”表示例”の中のタグはテンプレートファイルの中の一覧のループの中に記入すると実際に動かすことができます。

タイトル

投稿画面で入力したタイトルを表示する事が出来ます。

//タイトル表示例
<?php the_title(); ?>

本文

投稿画面で入力した本文を表示する事が出来ます。

//本文表示例
<?php the_content(); ?>

カテゴリー、タグ

投稿画面で設定したカテゴリー、タグを表示する事が出来ます。

//カテゴリー表示例
<?php the_category(); ?>

アイキャッチ(画像)

投稿画面で設定したアイキャッチ(画像)を表示する事が出来ます。

//アイキャッチ(画像)表示例
<?php the_post_thumbnail(); ?>

アイキャッチはそのままでは投稿画面で設定することはできず、テンプレートファイルのfunction.phpなどにadd_theme_support( ‘post-thumbnails’ );のような記述をする必要があります。

投稿日

記事が投稿された日時を表示する事が出来ます。
投稿日が新しいものにNEWの文字を付けることも可能です。

//投稿日表示例
<?php the_time(); ?>

閲覧数

記事の閲覧数が表示されます。
※ワードプレスに最初から入っている機能ではないですが、多少テンプレートファイルを弄れるユーザーであれば入れることは可能です。

上記は更に文字数を制限したり、カスタムフィールドというプラグインを使うことによってより細かいカスタマイズをする事が可能です。

カスタムフィールドプラグイン Advanced Custom Fields(外部リンク)

投稿ページをよりカスタマイズ出来、独自の入力項目を記事ページや記事一覧に表示することが可能となります。
サイト自体は英語ですが、Advanced Custom Fieldsで調べると設定の仕方を紹介しているサイトが複数出てきますので、そちらも合わせて参照下さい。

https://ja.wordpress.org/plugins/advanced-custom-fields/

※プラグインはワードプレスを入れているサイトから直接ダウンロードすることが可能です。

最後に

また機会があればワードプレスのカスタマイズ例について記事を書こうと思います。

当社ではWordPress(ワードプレス)のカスタマイズも行っておりますので、お気軽にご相談下さい。

2020年11月25日

【わかりやすい文章・書き方講座(2) 「型」にはまろう!】

TOPICS,クリエイティブ・ラボ

2020年11月16日

これでもう迷わない?WEBサイト制作時の手順

TOPICS,クリエイティブ・ラボ

2020年11月9日

【recruit】21卒 内定者が決まりました!!

news,TOPICS

2020年11月9日

NuePressで簡単にNuxt、WordPress REST APIを動かす

TOPICS,クリエイティブ・ラボ

2020年11月4日

動画広告のメリットとオススメの活用方法について

クリエイティブ・ラボ

2020年10月25日

【競合が多い業界こそ必見!】SNSを上手く活用した集客成功事例

TOPICS,クリエイティブ・ラボ

2020年10月20日

【Web広告 初心者講座】ディスプレイ広告の表示面と配信種類+お手軽/動画広告プラン始動のお知らせ

TOPICS,クリエイティブ・ラボ

2020年10月12日

【ブランディングを支えるヒアリング】効果のあるWebサイトとは?

TOPICS,クリエイティブ・ラボ

2020年10月7日

【わかりやすい文章・書き方講座(1)】そもそも、「わかりやすい」ってなんだろう?

TOPICS,クリエイティブ・ラボ

2020年9月29日

Magento(マジェント)導入を検討している人へ!マジェントの基礎知識をご紹介!

TOPICS,クリエイティブ・ラボ

2020年9月23日

WEBエンジニアと一緒に学ぶマーケティング(環境分析とSTP分析)

TOPICS,クリエイティブ・ラボ

CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ