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

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-->

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ピックアップ記事

  1. 目次 前準備のバックアップと注意点 英語の説明を翻訳してよく読み理解する ステップごと…
  2. 目次 Webデザイナーが初めて知る「MariaDB」という名前 MariaDBって何ですか…
  3. 目次 Web Design 3.0への流れ Web Design 2.0とWeb Desi…
  4. 目次 Macスリープ再起動エラーがおこった環境 スリープ再起動エラーメッセージの内容 …
  5. 2020年もすばらしい年になるはずでした。もう半年以上が過ぎました。2020年のお正月はいつも通り、…
PAGE TOP