LoginSignup
0
1

More than 1 year has passed since last update.

WordpressのTOPページの一部を固定ページで編集できるようにする

Posted at

TOPページに、新着情報以外でお客さまが情報を入れたいと言う要望はそれなりにあります。
さてその時、Wordpressのサイトを利用してどのような機能を実装すれば良いでしょうか?

「簡単な一言だけ表示したい」
「サイトにアクセスしてくれた方にあいさつしたい」
お客様それぞれです。

もし、100文字にも満たない文章を表示したいとなれば大体が「カスタムフィールド」と考えるかもしれません。
ただ私の経験上、お客さまと言うのはわがまま気ままで、当初言っていたことが二転三転するのは当たり前にあります。

お客様の要望に柔軟に答え、簡単に実装できるのが、「固定ページ」です。
お客様も固定ページであれば、今まで更新していたページから編集ができるので敷居が低く、更新しやすくなります。

コード

説明はどうでもいいからコードだけという方は以下からどうぞ。

<?php
//固定ページを直接表示 非公開・下書きの場合はエリアごと非表示
$my_post = get_post($page_id);
    if ($my_post->post_status == 'publish'):
        global $post;
            $args = array(
                'include' => '固定ページのID',
                'post_type' => 'page',
                'post_status' => 'publish'
            );
    $My_post = get_posts($args);
    foreach( $My_post as $post ) :  setup_postdata($post);
?>
<section class="notice-area clearfix">
    <div class="image-box-right float-box-r">
        <?php the_post_thumbnail(); ?>
    </div><!--//class="image-box-right"-->
    <h1 class="title-notice">
    <?php
    $title = get_the_title();
    $title = str_replace(' ', '<br class="pc-br">', $title);
    echo $title;
    ?></h1>
    <?php echo nl2br(the_content()); ?>
</section><!--//class="notice-area"-->
<?php
    endforeach;
endif;
wp_reset_postdata();
?>

コード解説

この部分では、該当の固定ページが「公開」publishの場合は表示するとしています。
post_statusの指定(該当のページが公開されているかどうか。この場合は「公開」している場合に内容を表示しますので、下書きや非公開では表示されません)をしています。
post_statusを指定しないと、公開・非公開関係なく、常時表示される様になりますので、ここはよほどの理由がない限りは指定していた方が良いと思います。

$my_post = get_post($page_id);
    if ($my_post->post_status == 'publish'):

表示する固定ページのIDpost_typeの指定(ここの場合は固定ページなのでpage)、

        global $post;
            $args = array(
                'include' => '固定ページのID',
                'post_type' => 'page',
                'post_status' => 'publish'
            );
    $My_post = get_posts($args);
    foreach( $My_post as $post ) :  setup_postdata($post);

このコードは、アイキャッチ画像を右側に、左側に固定ページで入力した文章を表示する様にスタイリングしています。

また、タイトルには半角スペースを2つ入れることで改行する様にstr_replaceで変換しています。
本文は、改行などもそのまま出力される様にnl2brで変換してechoしています。

実装方法

01.固定ページの作成とID取得

まず「固定ページ」を作成します。
固定ページの「ID」が必要なので、該当の固定ページのタイトルにマウスポインタを置いて、画面左下に表示されている
****/wp-admin/post.php?post=●●&action=editpost=の後ろにある数字をメモしておきます。
固定ページのID.jpg

02.取得したIDを所定の箇所に追記

'固定ページのID'にさきほど取得したIDを入れます。

$args = array(
    'include' => '固定ページのID',
    'post_type' => 'page',
    'post_status' => 'publish'
);

TOPページの固定ページの内容を表示したい箇所に、前述したコードを追記すれば、固定ページの内容とアイキャッチが表示されます。
あとは適宜、CSSで整えてください。

<section class="notice-area clearfix">clearfixと入っているのは、固定ページの本文中で、バージョンが古いWPの場合、文中に画像を入れてfloat(左右回り込み)させることが想定されたためです。
本文に画像を入れさせない、そもそも表示させない等の場合は、なくても良いです。
(もっと言うと、cssclearfixを書いていないと機能しませんが)

おまけ

アイキャッチ追加する所どこ?

ちなみに、アイキャッチ設定する個所がないよって方は、下記コードをfunctions.phpに入れると、編集画面右下にアイキャッチ画像を追加できるリンクが表示されます。

functions.php
add_theme_support('post-thumbnails');

ついでなのでパーツ化しちゃおう

さらに、固定ページを表示する部分だけ、パーツ化して他の案件でも簡単に実装(コードを一から書かずに流用)できるようにすると幸せになれると思います。
incフォルダにparts-***.phpというファイル(***はお好みで)を作成し、上述したコードをコピペして保存。
下記コードを、固定ページを読み込ませたいところに記述します。

parts-***.php
get_template_part('inc/parts-***');

get_template_partを使うときは、ファイル名の拡張子(.php)は入れないで指定して下さい。

まとめ

今回は簡単に短めな記事になりました。
WPの導入は「出来るだけ業者に頼まず、自社内でWebサイトの運用管理をする」という事が前提として多くあるため、お客様側でTOPページの情報が更新できるのはかなり喜ばれる機能です。
投稿ページで専用のカテゴリを用意して表示することもできますが、固定ページだと投稿から離れていて、運用面でも探しやすくわかりやすいかなと思っています。

毎度、WPで15年ほどWebサイトを制作していますが、独学の為、解釈が違ったり記述が間違えていたりという部分あるかと思います。その場合は、ぜひコメントで教えていただけると幸いです。

そろそろブロックエディタだけじゃなく、テーマjsonも覚えなきゃなぁなんて思っています。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1