タグラインのカスタマイズ | 京都でホームページ制作『みやこデザイン』

やりたかったこと

タグラインを最上部に表示させる。
その部分にカスタムフィールドで見出しを作りh1でマークアップする。
見出しが空でなければ入力値をｈ１でマークアップし、空であればタグラインを表示させる。
入力値が空であれば、タグラインはｐタグで挟んでいるので、ブログタイトルをｈ１でマークアップし、入力値がって、ｈ１を最上部に表示させる場合、ブログタイトルをｈ２にする。

まず、カスタムフィールドを作る

functions.phpに記載

<?php
add_action('admin_menu', 'add_tagline');
add_action('save_post', 'save_tagline');

function add_tagline(){
     if(function_exists('add_tagline')){
          add_meta_box('tagline1', '見出し', 'insert_tagline', 'page', 'normal', 'high');
          add_meta_box('tagline2', '見出し', 'insert_tagline', 'post', 'normal', 'high');

     }
}

function insert_tagline(){
     global $post;
     wp_nonce_field(wp_create_nonce(__FILE__), 'my_nonce');
     echo '<label class="hidden" for="tagline">見出し</label><input type="text" name="tagline" size="60" value="'.esc_html(get_post_meta($post->ID, 'tagline', true)).'" />';
     echo '<p>見出しを入力します。</p>';
}

function save_tagline($post_id){
	$my_nonce = isset($_POST['my_nonce']) ? $_POST['my_nonce'] : null;
	if(!wp_verify_nonce($my_nonce, wp_create_nonce(__FILE__))) {
		return $post_id;
	}
	if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return $post_id; }
	if(!current_user_can('edit_post', $post_id)) { return $post_id; }

	$data = $_POST['tagline'];

	if(get_post_meta($post_id, 'tagline') == ""){
		add_post_meta($post_id, 'tagline', $data, true);
	}elseif($data != get_post_meta($post_id, 'tagline', true)){
		update_post_meta($post_id, 'tagline', $data);
	}elseif($data == ""){
		delete_post_meta($post_id, 'tagline', get_post_meta($post_id, 'tagline', true));
	}
}
?>

<?php

add_action('admin_menu', 'add_tagline');

add_action('save_post', 'save_tagline');

function add_tagline(){

if(function_exists('add_tagline')){

add_meta_box('tagline1', '見出し', 'insert_tagline', 'page', 'normal', 'high');

add_meta_box('tagline2', '見出し', 'insert_tagline', 'post', 'normal', 'high');

}

function insert_tagline(){

global $post;

wp_nonce_field(wp_create_nonce(__FILE__), 'my_nonce');

echo '<label class="hidden" for="tagline">見出し</label><input type="text" name="tagline" size="60" value="'.esc_html(get_post_meta($post->ID, 'tagline', true)).'" />';

echo '<p>見出しを入力します。</p>';

}

function save_tagline($post_id){

$my_nonce = isset($_POST['my_nonce']) ? $_POST['my_nonce'] : null;

if(!wp_verify_nonce($my_nonce, wp_create_nonce(__FILE__))) {

return $post_id;

}

if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return $post_id; }

if(!current_user_can('edit_post', $post_id)) { return $post_id; }

$data = $_POST['tagline'];

if(get_post_meta($post_id, 'tagline') == ""){

add_post_meta($post_id, 'tagline', $data, true);

}elseif($data != get_post_meta($post_id, 'tagline', true)){

update_post_meta($post_id, 'tagline', $data);

}elseif($data == ""){

delete_post_meta($post_id, 'tagline', get_post_meta($post_id, 'tagline', true));

}

次はヘッダーを設定しよう

header.phpに記載

<?php
	$tagline = get_post_meta( $post->ID, 'tagline', true );
	if ( !empty( $tagline ) ) : ?>
	<h1 class="description"><?php echo get_post_meta( $post->ID , 'tagline' , true ); ?></h1>
	<?php else: ?>
	<p class="description"><?php bloginfo( 'description' ); ?></p>
<?php endif; ?>

<?php

$tagline = get_post_meta( $post->ID, 'tagline', true );

if ( !empty( $tagline ) ) : ?>

<h1 class="description"><?php echo get_post_meta( $post->ID , 'tagline' , true ); ?></h1>

<?php else: ?>

<?php endif; ?>

さらに、シングルページやページに記載

<?php
	$tagline = get_post_meta( $post->ID, 'tagline', true );
	if ( !empty( $tagline ) ) : ?>
		<h2 class="title first"><?php the_title(); ?></h2>
	<?php else: ?>
		<h1 class="title first"><?php the_title(); ?></h1>
<?php endif; ?>

<?php

$tagline = get_post_meta( $post->ID, 'tagline', true );

if ( !empty( $tagline ) ) : ?>

<?php else: ?>

<?php endif; ?>

きれいなコードかどうかは別にして、動いているからまぁいいや。