2014.07.25

WordPressの投稿画面を色々カスタマイズ

オッス、オラムラタ。

今回はWordpressのタイトル下やらエディター下など色々な場所に要素を追加してみたいと思います。

投稿の際の注意書きを入れたりマニュアルへのリンクを貼ったりすることでクライアントにも優しい投稿画面が仕上がるのではないでしょうか？

アクションフック

WPでは管理画面を開いた時や投稿画面を開いた時、プラグインを停止させた時など様々なタイミング（アクション）にフックを使い任意の処理を実行することができます。

プラグインAPI / アクションフック一覧

今回はその中で投稿画面で使用できるフックに注目していきます。

タイトルの直前で実行「edit_form_top」

まず記事タイトルを出力する直前に実行させたい場合は「edit_form_top」を使用します。

試しにテーマディレクトリ内のfunctions.phpに下記の記述をしてみます。

function caution_title_head(){
     echo '<p style="color:#FF0004; font-weight:bold; padding: 10px; border: 1px solid #FF0004; background: #FFFFFF; border-radius:5px; text-align:center; font-size:24px;">コピーコンテンツはダメ、絶対！</p>';
}
add_action( 'edit_form_top', caution_title_head );

function caution_title_head(){

echo '<p style="color:#FF0004; font-weight:bold; padding: 10px; border: 1px solid #FF0004; background: #FFFFFF; border-radius:5px; text-align:center; font-size:24px;">コピーコンテンツはダメ、絶対！</p>';

}

add_action( 'edit_form_top', caution_title_head );

これで投稿画面での出力結果は以下のようになります。

はい、これでクライアントにコピーコンテンツを投稿させない注意喚起ができました。

でもこれだけだとちょっと注意喚起としては弱いかもですね。
当然画像だって貼れちゃうので画像を貼って目立たせてみましょう。

function org_caution_title_head(){
     echo '<p style="color:#FF0004; font-weight:bold; padding: 10px; border: 1px solid #FF0004; background: #FFFFFF; border-radius:5px; text-align:center; font-size:24px;">コピーコンテンツはダメ、絶対！</p>
	 <div style="text-align:center; position:relative; margin-bottom:-14px;"><img src="'.get_bloginfo('url').'/test.png"></div>';
}
add_action( 'edit_form_top', org_caution_title_head );

function org_caution_title_head(){

<div style="text-align:center; position:relative; margin-bottom:-14px;"><img src="'.get_bloginfo('url').'/test.png"></div>';

}

add_action( 'edit_form_top', org_caution_title_head );

はい、とっても賑やかになりましたね。

ここまでしておけばどんな人でもコンテンツをコピーしようなんて思わないはずです。

タイトル直後で実行「edit_form_after_title」

長くなっちゃいましたが次はタイトル下に出力させる「edit_form_after_title」です。厳密にはタイトルしたというよりパーマリンク下ですが。

クライアントによっては無駄にタイトルを無駄に長くしてしまわれる方もいらっしゃると思います。
そんなクライアントのためにここでも注意を促していきましょう。

タイトルの長さが30文字を超えた場合下からニョキッとお兄さんが驚きながら注意してくれるようにしました。

function org_caution_title_bottom(){ ?>
	<script type="text/javascript">
		jQuery( function(){
			jQuery("input#title").bind('change', function(){
				var textLength = jQuery(this).val().length;
				if( textLength > 30  ){
					jQuery("#lengthchecker").animate({bottom:"-33px"});
				}
			});
		});
	</script>
    <div style="position:relative;"><img src="<?php bloginfo('url'); ?>/check.png" id="lengthchecker" style="position: absolute; left:500px; bottom:-280px;"></div>
<?php }
add_action( 'edit_form_after_title', org_caution_title_bottom );

function org_caution_title_bottom(){ ?>

jQuery( function(){

jQuery("input#title").bind('change', function(){

var textLength = jQuery(this).val().length;

if( textLength > 30 ){

jQuery("#lengthchecker").animate({bottom:"-33px"});

}

});

</script>

<div style="position:relative;"><img src="<?php bloginfo('url'); ?>/check.png" id="lengthchecker" style="position: absolute; left:500px; bottom:-280px;"></div>

<?php }

add_action( 'edit_form_after_title', org_caution_title_bottom );

で、こうなります。
アニメーションがカクついて分かりにくいかもしれませんが実際にはスムーズにお兄さんが下からニョキッと出てきます。

ちなみにニョキったお兄さんを引っ込ませる処理は書いていないのでこれを利用される奇特な方はご自分で引っ込ませる動きを加えてください。

エディター直下で実行「edit_form_after_editor」

いい感じにごちゃついてきましたね。
次はエディターの真下で実行させる「edit_form_after_editor」です。

ここに何を入れるか悩んだのですが、とりあえず「抜粋」や「カスタムフィールド」「リビジョン」などのエディター以降の要素に対してスクロールするメニューでも入れちゃいましょう。

function after_editor_menu(){ ?>
	<script type="text/javascript">
    jQuery(function(){
        jQuery('a[href^=#]').click(function(){
            var speed = 500;
            var href= jQuery(this).attr("href");
            var target = jQuery(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            jQuery("html, body").animate({scrollTop:position}, speed, "swing");
            return false;
        });
		jQuery("#editor_bottom_menu_list a").hover(function(){
			var desc= jQuery(this).data("desc");
			jQuery("#menu_description").text(desc);
		}, function(){
			jQuery("#menu_description").text("ここから各項目へ飛べますよ。あなたには分からないでしょうね。");
		});
    });
    </script>
	<div id="editor_bottom_menu">
    	<div id="editor_bottom_menu_image">
        	<img src="<?php bloginfo('url'); ?>/menu.png">
        </div>
        <div id="editor_bottom_menu_list">
        	<p id="menu_description">ここから各項目へ飛べますよ。あなたには分からないでしょうね。</p>
            <ul>
                <li><a href="#postexcerpt" data-desc="記事の抜粋内容。descriptionに使ったり使わなかったり。htmlタグは使用できませんよ">抜粋</a></li>
                <li><a href="#trackbacksdiv" data-desc="トラックバック送信に関する設定">トラックバック送信</a></li>
                <li><a href="#postcustom" data-desc="カスタムフィールドの設定">カスタムフィールド</a></li>
                <li><a href="#commentstatusdiv" data-desc="ディスカッションってなんだ">ディスカッション</a></li>
                <li><a href="#commentsdiv" data-desc="この記事に対するコメント">コメント</a></li>
                <li><a href="#slugdiv" data-desc="この記事のスラッグ設定">スラッグ</a></li>
                <li><a href="#authordiv" data-desc="この記事書いた人">作成者</a></li>
            </ul>
        </div>
    </div>
<?php }
add_action( 'edit_form_after_editor', after_editor_menu );

function after_editor_menu(){ ?>

jQuery(function(){

jQuery('a[href^=#]').click(function(){

var speed = 500;

var href= jQuery(this).attr("href");

var target = jQuery(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;

jQuery("html, body").animate({scrollTop:position}, speed, "swing");

return false;

});

jQuery("#editor_bottom_menu_list a").hover(function(){

var desc= jQuery(this).data("desc");

jQuery("#menu_description").text(desc);

}, function(){

jQuery("#menu_description").text("ここから各項目へ飛べますよ。あなたには分からないでしょうね。");

});

</script>

</div>

<p id="menu_description">ここから各項目へ飛べますよ。あなたには分からないでしょうね。</p>

<ul>

<li><a href="#trackbacksdiv" data-desc="トラックバック送信に関する設定">トラックバック送信</a></li>

<li><a href="#postcustom" data-desc="カスタムフィールドの設定">カスタムフィールド</a></li>

<li><a href="#commentstatusdiv" data-desc="ディスカッションってなんだ">ディスカッション</a></li>

</ul>

</div>

<?php }

add_action( 'edit_form_after_editor', after_editor_menu );

ページ内スクロールとリンクをロールオーバーすることでリンク先の説明文を表示させるようにしたので微妙に長くなってしまいました。

cssまで一緒に書いてると長くなりすぎるので、管理画面のhead要素内で実行される「admin_head」を利用して独自のcssを読み込んできてそこに記述しています。

function admin_css() {
    echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/custom.css">';
}
add_action('admin_head', 'admin_css');

function admin_css() {

echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/custom.css">';

}

add_action('admin_head', 'admin_css');

出力結果はこんな感じです。

リンクをロールオーバーするとaタグ内「data-desc」属性の内容が、上のテキスト部分に表示されるというわけです。
例えば「抜粋」に合わせるとこんな感じ。

オプション要素の最後で実行「edit_form_advanced」

「抜粋」や「カスタムフィールド」などのオプション要素群の最後に実行されるのが「edit_form_advanced」になります。
今回はここにページの先頭に戻るボタンでも置いてみましょう。

function org_caution_bottom($post){ ?>
	<script type="text/javascript">
	jQuery( function(){
		var pt = jQuery( "#pagetop_btn" );
		pt.css({"position":"fixed","bottom":0, "right":"30px"}).hide();
		jQuery( window ).scroll( function(){
			if( jQuery(this).scrollTop() > 100 ){
				pt.slideDown( "fast" );
			}else{
				pt.slideUp( "fast" );
			}
		});
		pt.click( function(){
			jQuery( "html,body" ).animate( {scrollTop:0},500 );
			return false;
		});
	});
	</script>
     <div id="pagetop_btn"><img src="<?php bloginfo('url'); ?>/top.png"></div>
<?php }
add_action( 'edit_form_advanced', org_caution_bottom );

function org_caution_bottom($post){ ?>

jQuery( function(){

var pt = jQuery( "#pagetop_btn" );

pt.css({"position":"fixed","bottom":0, "right":"30px"}).hide();

jQuery( window ).scroll( function(){

if( jQuery(this).scrollTop() > 100 ){

pt.slideDown( "fast" );

}else{

pt.slideUp( "fast" );

}

});

pt.click( function(){

jQuery( "html,body" ).animate( {scrollTop:0},500 );

return false;

});

</script>

<?php }

add_action( 'edit_form_advanced', org_caution_bottom );

これでページを少し下にスクロールするとページ右下からキリンさんがひょこっと顔を出してページ先頭（てっぺん）へと誘ってくれます。

まぁこの処理だと別にこのフックじゃなくてもいいんですけどね。

独自のボックスを追加「add_meta_box」

「add_meta_box」を使用することで独自のメタボックスを表示することができます。
メタボックスというのはこういうボックスのことです。

タイトルをクリックで開閉ができ、その下にコンテンツがあるボックスです。
「公開」や「カテゴリー」等もそうですね。

さっそく投稿画面のサイドカラム「公開」ボックスの上に「マニュアル」ボックスを追加してみましょう。

function org_side_box(){
add_meta_box( 'org_side_box_in', 'マニュアル', 'org_side_box_in', 'post', 'advanced', 'low' );
}
function org_side_box_in(){
	echo '<a href="manual.html" target="_blank">マニュアル</a>';
}
add_action( 'admin_menu', 'org_side_box' );

function org_side_box(){

add_meta_box( 'org_side_box_in', 'マニュアル', 'org_side_box_in', 'post', 'advanced', 'low' );

}

function org_side_box_in(){

echo '<a href="manual.html" target="_blank">マニュアル</a>';

}

add_action( 'admin_menu', 'org_side_box' );

「add_meta_box」のパラメーターのよって出力させる投稿タイプや場所などを変更できます。
詳しくは下記のページをご覧ください。

WordPress私的マニュアル　add_meta_box

後はcssでごにょごにょして…
こんな感じになりました。

右カラムの先頭に猫の兄貴によるマニュアルの導線ができました。
htmlやpdfなどでマニュアルを作成しておいてそこにリンクさせてやればいいと思います。

投稿タイプによって内容を変更させる

ちなみに今回の記述だとブログ記事投稿画面だけでなく固定ページやカスタム投稿タイプの投稿ページにも表示されます。

それだとちょっと困るって方は引数に「$post」を指定して、現在の投稿画面がどの投稿タイプなのかで分岐させてあげましょう。

例えば最初の「edit_form_top」だとこんな感じ。

function org_caution_title_head($post){
	if( $post->post_type == "post" ){
     echo '<p style="color:#FF0004; font-weight:bold; padding: 10px; border: 1px solid #FF0004; background: #FFFFFF; border-radius:5px; text-align:center; font-size:24px; position:relative; z-index:2;">コピーコンテンツはダメ、絶対！</p>
	 <div style="text-align:center; position:relative; margin-bottom:-14px; margin-top:-130px;"><img src="'.get_bloginfo('url').'/test.png"></div>';
	}
}
add_action( 'edit_form_top', org_caution_title_head );

function org_caution_title_head($post){

if( $post->post_type == "post" ){

echo '<p style="color:#FF0004; font-weight:bold; padding: 10px; border: 1px solid #FF0004; background: #FFFFFF; border-radius:5px; text-align:center; font-size:24px; position:relative; z-index:2;">コピーコンテンツはダメ、絶対！</p>