コーポレートサイトとかでよく目にする、新着情報更新したよー！ってお知らせするエリアの作り方をメモ。今回はアイキャッチ画像付きのやつを作っていきます。セキュリティ的にもあまりプラグインを増やしたくないので、カスタム投稿タイプを使って作成します。要件は以下になります。
- お客さんが直接コードを書かずに更新できるようにしたい。
- トップページにエリアを作成。日付とタイトルを表示。
- アーカイブはなし。本文が入力されていれば記事ページへリンク。
カスタム投稿タイプを作成
自作テーマ内のfuntions.phpに以下を追記します。
もし配布されているテーマを使用している場合は、子テーマを作りその中のfuntions.phpを編集しましょう。使用中のテーマがアップデートされた際に今までのカスタマイズが全部消えてしまう！といった事態を防ぎます。
funtions.php
/* お知らせを追加 */
function create_news() { //関数名を定義
register_post_type( 'news', //投稿タイプ名を定義
array(
'label' => '新着情報', //ダッシュボードに追加される項目のラベル
'labels' => array(
'all_items' => '新着情報一覧'
),
'public' => true, //ダッシュボードで表示されるか否か。初期値：false
'menu_position' => 5, //この投稿タイプが表示されるメニューの位置。5 - 投稿の下
'has_archive' => false, //アーカイブの有無を設定。今回不要なのでfalse
)
);
}
add_action( 'init', 'create_news' ); //initアクションで create_news の処理を登録
register_post_type（3行目）という関数を使って任意のnewsという投稿タイプを追加しています。今回必要ない引数は省略して書いてますが、例えばsupportsというエイリアスを使い、出力項目を設定することができます👆（サムネや抜粋など。Codex参照）
また投稿タイプを作成したら、WordPressの設定 > パーマリンク設定 を更新しましょう。内容は触らないでOKです。これをしないとうまく記事ページにリンクされないので注意。
ここまでの作業で、管理画面上に「新着情報」を追加することができました。以下のようにメニューに追加されます。
ちなみにリンク先のページは/news/タイトル といったurlになり、single.phpをテンプレートにして出力されます。新着情報独自のテンプレートを使いたい場合は、single-news.phpを作成してあげます。
index.phpに新着情報エリアを追加
続いて、追加した新着情報が出力されるエリアを作っていきます。
今回はトップページ内にエリアを作り、そこに出力させたいのでindex.phpを編集していきます。
またお客さん自身で更新作業をしてもらう前提なので、タイトルと本文どちらかが未入力の場合も想定して事前に定義しておきます。
index.php
<div id="news">
<h2>NEWS</h2>
<div id="news-inner">
<ul>
<?php
$args = array(
'post_type' => 'news', //配列$argsで投稿タイプnewsを取得
);
?>
<?php $my_query = new WP_Query( $args ); //WP_Queryクラスでループを作成 ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php if( empty($post->post_content) ) : //投稿の中に本文がなければリンクなし ?>
<li>
<p class="date"><?php the_time( get_option( 'date_format' ) ); ?></p>
<p class="news-content"><?php the_title(); ?></p>
</li>
<?php elseif( empty($post->post_title) ) : //投稿の中にタイトルがなければ本文を頭から20文字だけ表示 ?>
<li>
<p class="date"><?php the_time( get_option( 'date_format' ) ); ?></p>
<p class="news-content"><a href="<?php the_permalink() ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>
</li>
<?php else : //通常の投稿 ?>
<li>
<p class="date"><?php the_time( get_option( 'date_format' ) ); ?></p>
<p class="news-content"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p>
</li>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
<!--#news-innner--></div>
<!--#news--></div>
if文で、
・本文が空欄 → リンクなし
・タイトルが空欄 → 本文の頭20字を抜粋しリンクをつける
・両方入力済み → タイトルにリンクをつける
といった具合に表示させます。
管理画面の不要なメニューを非表示にする
お客さんが誤って操作してしまわないように、ユーザーによってWordPress管理画面上のメニューを非表示にします。今回は例として編集者（editor）でログインした場合のメニューを設定します。
functions.php
add_action( 'admin_menu', 'remove_menus' );
function remove_menus(){
global $menu;
if( current_user_can( 'editor' ) ){
//unset($menu[2]); //ダッシュボード
//unset($menu[5]); //投稿メニュー
//unset($menu[10]); //メディア
//unset($menu[20]); //固定ページ
//unset($menu[25]); //コメントメニュー
//unset($menu[60]); //外観メニュー
unset($menu[65]); //プラグインメニュー
unset($menu[75]); //ツールメニュー
unset($menu[80]); //設定メニュー
}
}
編集者としてWordPressにログインし直してみます。
するとこのように、コメントアウトがついてない項目のみ表示されます。
ちなみに今回追加した新着情報や、プラグインを追加している場合の$menu[ ]←この$menuキーを調べたい時。
functions.php
add_action( 'admin_menu', 'remove_menus' );
function remove_menus(){
global $menu;
var_dump($menu);
if( current_user_can( 'editor' ) ){
//unset($menu[2]); //ダッシュボード
//unset($menu[5]); //投稿メニュー
//unset($menu[10]); //メディア
//unset($menu[20]); //固定ページ
//unset($menu[25]); //コメントメニュー
//unset($menu[60]); //外観メニュー
unset($menu[65]); //プラグインメニュー
unset($menu[75]); //ツールメニュー
unset($menu[80]); //設定メニュー
}
}
4行目を追加すると、管理画面にダダーっと$menuキーが表示されるので、その番号をunset($menu[]);に追加してあげます。番号を確認したら、5行目はコメントアウトしてあげてください。
