WordPressカスタムフィールド表示のために PHPをカスタマイズする

更新 2021/06/24

PHPをカスタマイズする

 
クライアント案件で記事投稿に本文以外に、別の欄を追加で入れたい時があります。

この場合は、single.phpに手を加えてカスタマイズする高度な作業を行います。

カスタムフィールドの表示・非表示切替設定で、特別な欄を作る方法。

ワードプレスサイトに新規のカスタムフィールドを作成し、投稿記事の表示/非表示を
切り替える方法です。テーマにないいろいろな欄を作成する事が可能です。

このページの一番下に表示させている画像は、投稿記事の一番下の位置に、single.phpに、
phpカスタマイズを行い表示できました。

これには4つの作業が必要です。

  • カスタムフィールドを新規に作成させるプラグインをインストールして稼動させる
  • カスタムフィールドポストを管理するためのプラグインをインストールした
  • カスタムフィールドが編集画面で確認できたら、投稿記事により必要な画像をアップする
  • single.phpにカスタムフィールドを表示させるためのphpソースを貼り付ける

カスタムフィールドを作成するためのプラグインとは、Custom Post Type Permalinksです。

カスタムフィールドの管理プラグインとは、Custom Post Type UI です。

いずれもインストールして有効化すれば特に、デフォルトの設定のままでいいのですが、
カスタムフィールド>フィールドグループを編集 で、記述しているフィールド名を、
追加するphpソースの中のフィールド名と統一しておく必要があります。今回のフィールド名は、
「imgup」です。これが違っていると表示されません。

ソースを貼り付ける場所はどこ?

一番難解なのは、single.phpの書き換え、ソースの追加です。カスタムフィールドを表示
させるソースはこれです。

【AFTER】

<?php
//画像IDの取得
$attachment_id = get_field('imgup');
//echo "
<pre>";var_dump($attachment_id);echo "</pre>
";
//サイズの種類 thumbnail medium large full
$size = "large";
$image = wp_get_attachment_image_src( $attachment_id, $size );
//echo "
<pre>";var_dump($image);echo "</pre>
";
?>

<?php if( $image !== false ): ?>
<div class="imgbox">

<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo get_the_title(); ?>"></div>
<?php endif; ?>

 

single.phpの中のどこに貼り付けるかというのは、どの位置にカスタムフィールドを表示
させたいのか?表示させたい位置に貼り付けます。今回は、投稿postの中の一番下の位置に
貼り付けました。その部分のコードはこうなります。

【こちらがBEFORE】
<!--post start-->
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post_heading_wrapper">
<div class="postimage_container">
<div class="clear"></div>
</div>
<h1 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<ul class="post_meta">
<li class="day"><?php echo get_the_time('d') ?></li>
<li class="month"><?php echo get_the_time('M') ?></li>
<li class="year"><?php echo get_the_time('Y') ?></li>
<li class="posted_by"><span>by&nbsp;</span><?php the_author_posts_link(); ?></li>
<li><span>&nbsp;&#187;&nbsp;&nbsp;<?php the_category(', '); ?></span></li>
<li class="post_comment"><?php comments_popup_link('No Comments.', '1 Comment.', '% Comments.'); ?></li>
</ul>
</div>
<div class="post_content">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '
<div class="clear"></div>
<div class="page-link"><span>' . __('Pages:', 'onepage') . '</span>', 'after' => '</div>
')); ?></div>
<div class="clear"></div>
</div>

<?php
//画像IDの取得
$attachment_id = get_field('imgup');
//echo "
<pre>";var_dump($attachment_id);echo "</pre>
";
//サイズの種類 thumbnail medium large full
$size = "large";
$image = wp_get_attachment_image_src( $attachment_id, $size );
//echo "
<pre>";var_dump($image);echo "</pre>
";
?>

<?php if( $image !== false ): ?>
<div class="imgbox">
<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo get_the_title(); ?>"></div>
<?php endif; ?>
<!--End Post-->

つまりループの中に貼り付けるとうまくいきました。

ピックアップ記事

  1. Affinity Photoでも簡単に電子印鑑ができます!
    目次2023年10月インボイス制度導入前、Affinity Photoでの電子印鑑…
  2. ホームページの制作(Web制作)は、専門職がチームを組んで行います。見ず知らずの人たちが一緒に仕事を…
  3. (3)-3 GAFAMAからの脱出 2022年ブラウザはこれに決めました!おすすめ理由
    目次GAFAMAからの脱出する上で何はともあれブラウザの存在は大きいブラウザのセキュリティ度計…
  4. UIとUXを混同してる人が多すぎる
    目次 UIとUXを混同してる人が多すぎる チームプロジェクトにおけるUXとUIの「急がばま…
  5. LinkedinバッチをWordpressで表示させるには?
    目次これがLinkedinバッチの実物で、一番大きい特大サイズですLinkedinバッチをWo…
Web制作の流れ
もっとくわしい何を頼めるの?料金は?
PAGE TOP