WordPressカスタム投稿(お知らせ投稿等)追加

2015年11月6日

今回は、WordPressに元々ある投稿(ブログ)ではなくて、今更!?という気はしますが、企業サイト等のトップページに表示するお知らせ投稿機能追加する記事となります。

↓↓表示イメージ↓↓

カスタム投稿追加イメージ

カスタム投稿には、プラグインで追加する方法もありますが、今回は、phpやhtmlを触れて追加する方法となります。

プラグインで導入してみたい方は「Custom Post Type UI」で検索ください。

スポンサーリンク

カスタム投稿とは?

通常の投稿以外に「お知らせ(新着情報)」・「お店の商品」等、投稿(ブログ)ではなくて、WordPressのダッシュボードでも動的にテキスト・画像等を追加できるようにするためのカスタマイズされた投稿機能となります。

カスタム投稿メリット

一度追加してしまえば、カスタム投稿かすることで、html/css等のコーディングスキルを持っていなくても、WordPressのダッシュボードから誰でも簡単に追加できてしまうメリットがあります。

ファイル触ったり、専門スキルがなくても安全に更新ができるという優れものです。

実際にお知らせ投稿追加してみよう

基本的に触る必要があるファイルですが、まずPHP・htmlのスキルが必要になります。

ただし、ある程度決まっているものであれば、

PHP function.phpを編集

function.phpを開くorファイルを作成して、カスタム投稿追加の関数(メソッド)を追加します。

/* お知らせカスタム投稿タイプの追加 */
add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'news',
    array(
      'labels' => array(
      'name' => __( '新着情報' ),
      'singular_name' => __( '新着情報' )
      ),
      'public' => true,
      'menu_position' =>5,
      'supports' => array('title','editor','thumbnail',
      'custom-fields','excerpt','author','trackbacks',
      'comments','revisions','page-attributes')
    )
  );
  register_taxonomy(
    'news-cat',
    'news',
    array(
      'hierarchical' => true,
      'update_count_callback' => '_update_post_term_count',
      'label' => '新着カテゴリー',
      'singular_label' => '新着カテゴリー',
      'public' => true,
      'show_ui' => true
    )
  );
}

html 表示してみよう

表示するときにコードが必要となるものとして、function.phpで追加したpost_type(投稿のタイプ)や表示する件数等を取得する。

取得した投稿のデータを繰り返し文(while/foreach/for)で、取得した情報文を表示させる。

<?php
    /* カスタム投稿タイプをで5件分データを取得 */
    $loop = new WP_Query( array( 'post_type' => 'news', 'posts_per_page' => 5 ) );
    /* 取得したデータ分を繰り返し分で処理する */
    while ( $loop->have_posts() ) : $loop->the_post();
?>
/* 投稿した日時などを表示 */
<?php echo get_the_date(); ?>
/* 指定されたタクソノミー(カスタム分類)に関して、投稿に付けられたタームの HTML 文字列を返します */
<?php echo get_the_term_list( $post->ID, 'news-cat'); ?>
/* お知らせ等の詳細ページがある場合、リンクを設定する */
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
/* 投稿(お知らせ等)のタイトルを表示 */
<?php the_title(); ?></a>
/* 投稿(お知らせ等)への続き表示したい場合設定 */
<?php the_content('続きを読む'); ?>
<?php endwhile; ?>

必要そうなものをざっと出してみました。一行単位で説明をいれているので、実際に使われるときは、フォーマット整えていただけたらと思います。

アイキャッチ画像(サムネイル)等を表示したい場合、 下記のように画像のチェックをして、設定されていれば、設定画像を表示して、未設定の場合は、デフォルトの画像などを表示するようにする。

<?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail('thumbnail'); ?>
<?php else : ?>
    <img src="<?php bloginfo('template_url'); ?>/img/noimage.gif" width="150" height="150" alt="defalut-img" />
<?php endif ; ?>

ここまでで、ダッシュボードに新着情報が表示されていると思います。

ダッシュボードでカテゴリーや投稿を追加して、表示させてみましょう!!

カスタム投稿詳細ページ作成

個別でデザインを変えたい場合は、single.php(投稿詳細ページ)/archive.php(アーカイブページ)をそれぞれコピーする。

single-news.php/archive-news.phpを作成するとこちらのページが優先されて表示されるようになります。

元々ある投稿の詳細ページと同様な追加したお知らせの詳細ページも見ることができるようになっていると思います。

パーマリンクの設定が必要な方もいるかと思います。こちらにも参考となるサイトがありましたので、ご参照ください。

参考WordPressのカスタム投稿タイプの使い方が初心者でも超わかる記事10選

まとめ

手作業でやっていた新着や商品メニュー等をカスタム投稿で、簡単に管理画面から追加可能となりますので、wordpressでサイト構築する際は、動的に追加が必要になるものは、カスタム投稿で対応するといいと思いました。


スポンサーリンク
PAGE TOP