WordPressに追加できる特徴的な機能として、カスタム投稿タイプというオリジナルの投稿機能を追加することができる機能があります。

企業のホームぺージに必要な「NEWS(お知らせ)」だけを通常の「投稿」とは分けて「お知らせ」にまとめて書いておけば管理がしやすいです。

しかも、TOPページには「NEWS(お知らせ)」を載せることが多いので、PHPで「NEWS(お知らせ)」 を自動取得して新着お知らせを数件順番に表示するととても便利。

プラグインを使わずにこれをショートコードにしてどこでも簡単に使える方法を紹介します。

では、参りましょう。

カスタム投稿タイプを作る

まずは、カスタム投稿タイプで「お知らせ」と表示されるものを作ります。

functions.phpに追記

function add_custom_post() {
    register_post_type(
    'infopage', // 他のカスタム投稿タイプと識別するID
    array(
      'label' => 'お知らせ', // 管理画面に表示されるテキスト
      'public' => true,
      'has_archive' => true,
      'menu_position' => 5, // 管理画面に表示する順番
      'supports' => array( // 投稿画面で表示される項目
                      'title', // タイトル
                      'editor', // 内容の編集
                      'thumbnail', // サムネイル
                      'revisions', // リビジョンを保存する
                      'excerpt', // 抜粋テキスト
                      'custom-fields', // カスタムフィールド
                      )
    )
  );
}
add_action('init', 'add_custom_post');

コメントを入れていますが、補足で説明します。

add_action('init', 'add_custom_post');

でフックします。

register_post_type( 'id名', array() );

この一文でカスタム投稿タイプを設定できます。

今回は「お知らせ」というカスタム投稿タイプだけ作りますが、いくつも作りたい場合はid名が被らないようにすれば複数作れます。

配列array()の中身は 「ワードプレスCodexの関数リファレンス」が参考になります。

カスタム投稿の記事だけを取得する

次に、カスタム投稿「お知らせ」の記事を新着で取り出します。

functions.phpに追記

<?php
/* 新着記事を読みこむショートコード[add_new_infopage] */
function add_new_infopage_func($atts){
    ob_start();
?>
<ul>
  <?php $args = array(
    'numberposts' => 5, // 表示する記事の数
    'post_type' => 'infopage' // 投稿タイプ名
    // 条件を追加する場合はここに追記
  );
  $customPosts = get_posts($args);
  if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post );
  ?>
  <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

  <?php endforeach; ?>

  <?php else : //記事が無い場合 ?>
    <p>表示する記事がありません。</p>
  <?php endif;
  wp_reset_postdata(); //クエリのリセット ?>
</ul>
<?php
    return ob_get_clean();
}
add_shortcode('add_new_infopage', 'add_new_infopage_func');

コメントを入れていますが、補足で説明します。

ショートコードというのは投稿のビジュアル編集に[ショートコード名]と書くだけでphpの関数を実行できる機能です。

今回は

    表示する記事がありません。

というショートコードを自作します。

add_shortcode('add_new_infopage', 'add_new_infopage_func');

ショートコードはこのようにフックすることで

    表示する記事がありません。

を書いたところでadd_new_infopage_func()が実行されます。

そこで以下のように関数を作っていきます。

function add_new_infopage_func($atts){
    ob_start();

ob_start(); は計算した結果をすぐに表示せずに、一旦別の場所に置いておこうというバッファリングをするための関数です。

この下でHTML構造を構築します。

今回は

<ul>
  <li><a href="記事URL">記事タイトル</a></li>
  …
  'numberposts'の設定数だけ<li>を繰り返します。
  …
</ul>

というシンプルなリストを出力するようにしています。

各ページごとに別々のCSSを適用する方法の一つに、 <body>にページごとに異なるidやclassを付与する方法があります。

WordPressには記事ごとにIDが振り当てられているのでphpでこれを取得すればページごとに異なるidやclassを付与出来ます。

では、参りましょう。

<body>タグに追記

page.php や single.php などの<body>タグに以下のように追記します。

<body id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

the_ID() は現在の投稿の ID を表示します。

カスタムCSSとは各記事一つひとつにCSSを適用させることの出来る機能です。

とても便利な機能なので、作っておきましょう。

では、参りましょう。

functions.phpに追記

//『カスタムCSS』入力フィールドを投稿画面に追加する
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
    add_meta_box('custom_css', 'カスタムCSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'カスタムCSS', 'custom_css_input', 'page', 'normal', 'high');
    add_meta_box('custom_css', __('カスタムCSS', 'custom_css_input'), 'custom_css_input', 'wp-plugin', 'normal', 'high');
}

function custom_css_input() {
    global $post;
    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
    echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
        endwhile; endif;
        rewind_posts();
    }
}

たったこれだけで、各記事ページにカスタムCSSフィールドを追加することができます。

wordpress 4.2 から絵文字機能が追加され、全ページに自動で絵文字表示用の js と style 属性が記述されるようになりました。

<head>内に js と style が追加されてます。

このせいで、記事に埋め込んだ Twitter に絵文字が入っていたりすると編集画面がとてつもなく重くなります。

wordpress の絵文字を使わない方は、 remove_action() で消せます。

functions.phpに追記

/* 全ページに読み込まれていた絵文字表示用の js と style 属性を非表示にする */
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

remove_action( ‘admin_print_scripts’, ‘print_emoji_detection_script’ );
remove_action( ‘admin_print_styles’, ‘print_emoji_styles’ );

上の2行は管理画面に適用される js と style 属性でも絵文字を非表示にできます。