Secura Vita

Category: Works , WordPress
Works

wordpress:投稿の間違い・漏れをチェックし公開ミスを防ぐjQueryスクリプト

wordpress:投稿の間違い・漏れをチェックし公開ミスを防ぐjQueryスクリプト

wordpressの間違い投稿は危険

私もたまにやってしまうのですが、カテゴリをチェックし忘れてたりパーマリンクが日本語のままだったりと。

すぐに気がつけばいいのですが、しばらく忘れてて望まない形でGoogleにインデックスされてしまったりしますよね。

公開と同時にtwitter等のソーシャルメディアに自動で投稿するようにしてたりするとやっかいですよね。

そんな間違いをチェックし、公開ミスを防ぐためにjQueryのスクリプトを書きましたのでよければご参考まで。

公開のチェックアラート
公開のチェックアラート

こんなアラートをだします。

ソース

add_action( 'admin_head-post.php', 'check_publish_post' );
add_action( 'admin_head-post-new.php', 'check_publish_post' );
function check_publish_post() {
    
    if( get_post_type() == 'post' ) {        
    
        add_action( 'admin_print_footer_scripts' , 'check_publish_post_scripts' );
        function check_publish_post_scripts() {
            echo <<<EOF
<script>
(function($) {

    //▽エンターキー無効
    $('input').on('keypress' , function(event) {
        return event.which !== 13;
    });
    //△エンターキー無効
    
    //▽チェック処理
    $('input[name=publish]').click(function() {
    
        //▼タイトルのチェック
        if( !$('input[name=post_title]').val() ) {
            alert('タイトルが入力されていません');
            return false;
        }
        //▲タイトルのチェック
        
        //▼パーマリンクのチェック
        var post_title = $('#editable-post-name-full').val();
        if( !post_title ) {
            alert( 'パーマリンクが決定されていません。' );
            return false;
        } else if( !post_title.match(/^[a-z0-9\-_]+$/g) ){
            alert('パーマリンクに使用できない文字を含んでいます。');
            return false;
        }
        //▲パーマリンクのチェック
        
        //▼カテゴりーのチェック
        if( !$('#taxonomy-category input[type=checkbox]').is(':checked') ) {
            alert( 'カテゴリーがチェックされていません' );
            return false;
        }
        //▲カテゴりーのチェック
 
        //▼タグのチェック
        if( !$('#post_tag .tagchecklist span').length ) {
            alert('タグが設定されていません');
            return false;
        }
        //▲タグのチェック
        
        //▼アイキャッチのチェック
        if( !$('#set-post-thumbnail img').length ) {
            alert('アイキャッチが設定されていません');
            return false;
        }
        //▲アイキャッチのチェック
        
        //▼最終確認
        if( $('input#in-category-1').is(':checked') && $('input#in-category-1').parent().text().indexOf('未分類') ) {
            if( !confirm('カテゴリ「未分類」にチェックされています。公開してもよろしいですか?') ) return false;
        } else {
            if( !confirm('公開します。よろしいですか?') ) return false;
        }
        //▲最終確認

    });
    //△チェック処理
    
})(jQuery);
</script>
EOF;
        }
        
    }
}

上記のものをfunctions.phpに貼り付けてください。

※2019/10/03 jsソースを一部修正しました。

解説

チェック動作する場面は「公開」「予約投稿」です。
下書き」「更新」はチェックしません。

処理は上から順番に行っていきます。

admin_head

add_action( 'admin_head-post.php' , 'check_publish_post' );
add_action( 'admin_head-post-new.php' , 'check_publish_post' );

これは新規投稿画面・投稿編集画面で関数check_publish_post()を実行しなさいというものです。

admin_head-{ページ名}でそのページのみで実行させることができます。

check_publish_post()

admin_headで呼び出される処理です。

if(get_post_type() == 'post')

で「投稿」のみ実行させます。

この分岐を書いておかないと固定ページでも発動してしまいます。

またこの部分を

if(get_post_type() == '{ポストタイプ名}')

と書くことでカスタム投稿タイプでも使用可能です。

admin_print_footer_scripts

add_action( 'admin_print_footer_scripts' , 'check_publish_post_scripts' );

上記の分岐が終わると今度こそjQuery文の出力です。

jQueryが書かれたcheck_publish_post_scripts()関数を呼び出します。

check_publish_post_scripts()

ここで各項目のチェック(jQuery)を行います。

いらないものは削除でOKです。
//▼ から //▲ を削除してください。

投稿実行時
//▽エンターキー無効
$('input').on('keypress' , function(event) {
	return event.which !== 13;
});
//△エンターキー無効

//▽チェック処理
$('input[name=publish]').click(function() {

エンターキーで投稿を無効化します。

更新」時はスルーしたいので上記のように書きました。

更新時もチェックする場合はエンターキーの記述無しで

$('form[name=post]').submit(function() {

でOKです。

タイトルのチェック
//▼タイトルのチェック
if( !$('input[name=post_title]').val() ) {
	alert('タイトルが入力されていません');
	return false;
}
//▲タイトルのチェック

wordpressはタイトルなしでも投稿できてしまうのでそのチェックです。

パーマリンクのチェック
//▼パーマリンクのチェック
var post_title = $('#editable-post-name-full').val();
if( !post_title ) {
	alert( 'パーマリンクが決定されていません。' );
	return false;
} else if( !post_title.match(/^[a-z0-9\-_]+$/g) ){
	alert('パーマリンクに使用できない文字を含んでいます。');
	return false;
}
//▲パーマリンクのチェック

タイトルを入力し、ページの何処かをクリックするとパーマリンクが決定されます。

パーマリンク

日本語タイトルだと日本語がそのままはいってしまうのでそのチェックもかけてます。

チェックは「半角英時(小文字)半角数字、-(半角ハイフン)、_(半角アンダーバー)」です。

日本語タイトルでもいいよって方はelse移行を削除してください。

なお、パーマリンク設定を「%postname%」以外にしてる場合はこのチェック全てを削除してください。


※2019/10/03追記

パーマリンクの取得を書き直しました。

var post_title = $('#editable-post-name').text();
↓
var post_title = $('#editable-post-name-full').val();

前の書き方だとパーマリンクが長くなると表示が省略されてしまい、使いない文字を含んでしまうためです。

パーマリンク

HTMLソースを調べてみると#editable-post-name-fullというdivがあり、そこにはフルで格納されてるみたいなのでそっちから取得するようにしました。

パーマリンク
カテゴリーのチェック
//▼カテゴりーのチェック
if( !$('#taxonomy-category input[type=checkbox]').is(':checked') ) {
	alert( 'カテゴリーがチェックされていません' );
	return false;
}
//▲カテゴりーのチェック

カテゴリのチェックです。

wordpressの投稿はカテゴリー必須です。選択していないとデフォルトで指定されたカテゴリー(初期:未分類)に入ります。

パーマリンク設定に「%categoey%」を使用している場合も多いと思いますので必須チェックですね。

カスタムタクソノミーの場合はIDが「#taxonomy-{タクソノミー名}」になります。

タグのチェック
//▼タグのチェック
if( !$('#post_tag .tagchecklist span').length ) {
	alert('タグが設定されていません');
	return false;
}
//▲タグのチェック

任意で。基本は削除でいいと思います。

アイキャッチのチェック
//▼アイキャッチのチェック
if( !$('#set-post-thumbnail img').length ) {
	alert('アイキャッチが設定されていません');
	return false;
}
//▲アイキャッチのチェック

これも任意で。

最終確認
//▼最終確認
if( $('input#in-category-1').is(':checked') && $('input#in-category-1').parent().text().indexOf('未分類') ) {
	if( !confirm('カテゴリ「未分類」にチェックされています。公開してもよろしいですか?') ) return false;
} else {
	if( !confirm('公開します。よろしいですか?') ) return false;
}
//▲最終確認

問題がない場合、「公開しますか?」の確認ボックスがでます。

カテゴリーに「未分類」が設定されてた場合はその確認も表示します。

この「未分類」はカテゴリーIDが1で名前が「未分類」というチェックです。初期値から変更している場合は動作しません。

※各チェックのテキストは任意で変更してください。

補足

公開の確認だけでいい

細かいチェック無しで公開前に確認するだけでいいよーって人は下記ソースで。

add_action( 'admin_print_footer_scripts' , 'check_new_post_script' );
function check_new_post_script() {
	echo <<<EOF
<script>
(function($) {
	//エンターキー無効
	$('form[name=post] input').on('keypress' , function(event) {
		return event.which !== 13;
	});

	//チェック処理
	$('input[name=publish]').click(function() {
		if( !confirm('公開します。よろしいですか?') ) return false;
	});
})(jQuery);
</script>
EOF;
} 

これだけでOK!これで投稿タイプ(投稿・固定ページ・カスタム投稿)問わす「公開」を推した時に確認のアラートが出ます。

functions.phpについて

functions.phpを修正するときは必ずローカルで作業しFTPクライアントにてアップロードしてください。

管理画面からでも編集できますが、そうする場合はすぐに元に戻せる環境で作業してください。

ミスが1箇所でもあればページが真っ白になってしましますので。

それとwordやメモ帳は使用しないでください。

functions.phpの場所は「wp-content/themes/{テーマ名}/functions.php」です。


こんな感じです。

公開ミスが多いので自分用に作ってみたのを拡張させた感じですかね。

分岐をいっぱい書けばそれぞれの投稿タイプごとに処理を分けたり、カスタムフィールドのチェックなんかも行えますね。

使いやすいようにカスタマイズしてみてください。


おもしろかった・役に立った
▼ブログランキング参加中!クリック!▼
  • ブログランキング・にほんブログ村へ

Comment

  1. くーた より:

    日本語パーマリンクを禁止にしたくて自分で試行錯誤してたのですが、こちらのコードが完璧でしたので使用させて頂きます。ありがとうございました。

    1. あつお より:

      コメントありがとうございます!自分で考えたコード使ってくれるなんて嬉しいです!何か不具合あったらお知らせくださいませ。

Leave a comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ソースコードを記入する場合は [code]~[/code] でくくってください。
[code]
echo "Hello World";
[/code]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください