Yoshihiro 下のようなトップ画像の更新をSmart Custom Fields(SCF)の オプションページを利用して、ユーザーが更新できるようにする方法を紹介します。
Smart Custom Fieldsの導入
まずはSmart Custom Fieldsを導入します。
管理画面プラグインメニューの新規追加を選択し、入力欄に「Smart Custom Fields」と入力し、「インストール」及び「有効化」します。
カスタムフィールドを利用して投稿する場合は、Smart Custom Fieldsメニュー内で新規追加して項目設定するのですが、今回はオプションページを利用して項目設定するので、Smart Custom Fieldsメニューでは何も変更しなくても良いです。
オプションページとは
Smart Custom Fieldsのオプションページとは、カスタムフィールドの入力をする専用ページを管理画面のメニューとして設けられる機能です。
今回はトップ画面の画像とテキストを更新できるようにしたいので、入力項目としては全部で５項目
- 画像１から画像３
- キャッチ１行目と２行目
となります。
手順１．オプションページの設定を定義する
下記ページを参考にしてfunctions.phpに実装しています。
2inc.org$Setting->add_group配列内でカスタムフィールドの項目を設定して、smart-cf-register-fieldsフィルターフックにて、オプションページの定義を呼び出します。
add_filter( 'smart-cf-register-fields', 'home_register_fields', 10, 4 );
function home_register_fields( $settings, $type ) {
if ( 'fv-options' !== $type ) {
return $settings;
}
$Setting = SCF::add_setting( 'cf-home', 'ファーストビュー設定' );
$Setting->add_group(
'group-home',
false,
array(
array(
'name' => 'home_fv1',
'label' => '画像１',
'type' => 'image',
'size' => 'medium',
'instruction' => '１番目に表示する画像を選択してください',
'notes' => '推奨サイズ: 幅1920px 高さ1280px',
),
array(
'name' => 'home_fv2',
'label' => '画像２',
'type' => 'image',
'size' => 'medium',
'instruction' => '１番目に表示する画像を選択してください',
'notes' => '推奨サイズ: 幅1920px 高さ1280px',
),
array(
'name' => 'home_fv3',
'label' => '画像３',
'type' => 'image',
'size' => 'medium',
'instruction' => '１番目に表示する画像を選択してください',
'notes' => '推奨サイズ: 幅1920px 高さ1280px',
),
array(
'name' => 'home_fv_text1',
'label' => 'ファースキャッチ１行目',
'type' => 'text',
'size' => 'medium',
'instruction' => '10文字以内にしてください',
'notes' => '（例）ようこそ',
),
array(
'name' => 'home_fv_text2',
'label' => 'ファースキャッチ２行目',
'type' => 'text',
'size' => 'medium',
'instruction' => '10文字以内にしてください',
'notes' => '（例）我が家へ',
),
)
);
$settings[] = $Setting;
return $settings;
}手順２．管理画面に表示する
管理画面のメニューを作成するには、同じくfunctions.phpに下記コードを実装します。
add_action( 'init', 'cf_create_admin_menu' );
function cf_create_admin_menu() {
/**
* @param string $page_title ページのtitle属性値
* @param string $menu_title 管理画面のメニューに表示するタイトル
* @param string $capability メニューを操作できる権限（maange_options とか）
* @param string $menu_slug オプションページのスラッグ。ユニークな値にすること。
* @param string|null $icon_url メニューに表示するアイコンの URL
* @param int $position メニューの位置
*/
SCF::add_options_page(
'トップページ 表示設定',
'トップ画像設定',
'publish_pages',
'fv-options',
'dashicons-admin-settings',
5
);
}手順３．カスタムフィールドの値を取得する
SCF::get_option_meta()にて取得します。
第１引数には、手順２で定義した$menu_slug、第２引数には手順１で定義したnameを入力します。
$fv1,$fv2,$fv3はID、$fv_catch1と$fv_catch2はテキストが取得されます。
<?php
if (class_exists('SCF')) {
$fv1 = SCF::get_option_meta('fv-options', 'home_fv1');
$fv2 = SCF::get_option_meta('fv-options', 'home_fv2');
$fv3 = SCF::get_option_meta('fv-options', 'home_fv3');
$fv_catch1 = SCF::get_option_meta('fv-options', 'home_fv_text1');
$fv_catch2 = SCF::get_option_meta('fv-options', 'home_fv_text2');
}
?>手順４．取得したフィールドの値を利用して画像やテキストを表示する
取得した IDやテキストをHTMLに組み込めば表示できます。
<section class="p-first-view">
<div class="first__imgBox">
<div class="main_img" style="background-image: url('<?php echo wp_get_attachment_url($fv1); ?>')"></div>
<div class="main_img" style="background-image: url('<?php echo wp_get_attachment_url($fv2); ?>')"></div>
<div class="main_img" style="background-image: url('<?php echo wp_get_attachment_url($fv3); ?>')"></div>
</div>
<div class="first__catch">
<p><?php echo $fv_catch1; ?><br><?php echo $fv_catch2; ?></p>
</div>
</section><!-- /.p-first-view -->手順としては以上となりますが、最後にCSSも投稿しておきます。
.p-first-view {
width: 100vw;
height: 100vh;
.first__imgBox {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.main_img {
z-index: 10;
opacity: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
animation: anime 15s 0s infinite;
&:nth-of-type(2) {
animation-delay: 5s;
}
&:nth-of-type(3) {
animation-delay: 10s;
}
@keyframes anime {
0% {
opacity: 0;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
50% {
opacity: 0;
transform: scale(1.1);
z-index: 9;
}
100% {
opacity: 0;
}
}
}
}
.first__catch {
writing-mode: vertical-rl;
position: absolute;
bottom: 35%;
right: 10%;
color: #fff;
z-index: 20;
font-family: "YuMincho";
font-size: 50px;
font-weight: bold;
line-height: 2.5;
letter-spacing: 0.23em;
}
}