おすすめのガジェット

記事内に広告を含む場合があります

投稿・カテゴリ一覧にIDコピーボタンを追加するカスタマイズ

この記事では投稿記事・カテゴリー・タグ一覧にIDを表示し、コピーボタンを追加するWordPressのカスタマイズを紹介します。
コピペだけでカスタマイズできるので、IDを調べたり使うならおすすめのカスタマイズです。

WordPressのテーマであるCocoonのショートコードのnew_listやpopular_listなどで、記事ID・カテゴリーIDをよく使います。

ただIDはURLから判断しないといけないので、調べるのとコピペするのは少し面倒です。

そこで一覧画面にIDのコピーボタンを設置して、IDを使いやすくカスタマイズしました。

一覧画面にIDのコピーボタンを設置

 

Cocoonは投稿一覧と固定ページにIDが追加されますが、カテゴリー・タグ一覧には追加されないので、そちらにも追加します。

一覧ページにIDだけを表示したいなら、こちらのIDを追加するカスタマイズ記事をお読みください。

【WordPress】カテゴリ一覧・タグ一覧ページにIDを表示するカスタマイズ
ワードプレスは標準機能ではカテゴリーやタグ一覧ページにIDは表示されません。 通常は非表示でも問題ないのですが、テーマやプラグインの機能を使うときにIDを指定することがあります。 そんなときに一覧画面にIDを表示させておくと便利です。 この...
dev.macha795.com
2020.05.10

 

スポンサーリンク
この記事を書いた人：まちゃ
ガジェット好き 自作PC歴20年超え スマホゲームのエンジニア アニメ・ゲーム好き

やりたいこと、IDのコピーボタンを追加したい

投稿一覧ページと固定ページ一覧ページにIDを追加し、コピーボタンも設置できます。

Cocoonなどのテーマによっては、IDを表示してくれる機能があるかもしれません。

IDのコピーボタンを追加

 

カテゴリーページにも同様にIDとコピーボタンを置いて、IDのコピーを簡単にできるようにカスタマイズします。

カテゴリーページにも同様にIDとコピーボタンを置いて、IDのコピーを簡単にできます。

 

目次に戻る

説明を読まずに貼り付けて試してみる

とりあえずコピーボタンを設置したいなら、以下のソースコードをfunctions.phpにコピペするだけで追加できます。

if (is_admin()) {  // 管理画面のみメソッド追加する

// CocoonなどIDが表示されているテーマは不要
// 投稿一覧・固定ページ一覧にIDを追加する
if ( !function_exists( 'mch_customize_admin_manage_posts_columns' ) ):
add_filter( 'manage_posts_columns', 'mch_customize_admin_manage_posts_columns');
add_filter( 'manage_pages_columns', 'mch_customize_admin_manage_posts_columns');
function mch_customize_admin_manage_posts_columns($columns) {
	$columns['post-id'] = __( 'ID', THEME_NAME );
	return $columns;
}

add_action( 'manage_posts_custom_column', 'mch_customize_admin_add_column', 10, 2 );
add_action( 'manage_pages_custom_column', 'mch_customize_admin_add_column', 10, 2 );
function mch_customize_admin_add_column($column_name, $post_id) {
	//投稿ID
	if ( 'post-id' == $column_name ) {
		$thum = $post_id;
		echo $thum;
	}
}
endif;


// コピーボタンを追加する
if ( !function_exists('mch_customize_admin_add_column_id') ):
function mch_customize_admin_add_column_id($column_name, $post_id)
{
	// 投稿ID
	if ( 'post-id' === $column_name ) {
		echo "<div><span class=\"button mch-copyId\" data-copy-id=\"{$post_id}\" >コピー</span></div>";
	}
}
add_action( 'manage_posts_custom_column', 'mch_customize_admin_add_column_id', 10, 2 );
add_action( 'manage_pages_custom_column', 'mch_customize_admin_add_column_id', 10, 2 );
endif;


// クリップボードに書き込み処理
if ( !function_exists( 'mch_admin_script_copy_id' ) ):
function mch_admin_script_copy_id(){
	$js =<<<TEXT
<script type="text/javascript">
(function($) {
$(document).on( 'click','.mch-copyId', function(){
	var copyTargetId = $(this).data('copy-id');
	var listener = function(e){
		e.clipboardData.setData("text/plain" , copyTargetId);
		// 本来のイベントをキャンセル
		e.preventDefault();
		// 終わったら一応削除
		document.removeEventListener("copy", listener);
	};
	// コピーのイベントが発生したときに、クリップボードに書き込むようにしておく
	document.addEventListener("copy" , listener);
	// コピー
	document.execCommand("copy");
});
}(jQuery));
</script>
TEXT;
	echo $js;
}
add_action( 'admin_footer-post-new.php', 'mch_admin_script_copy_id' );
add_action( 'admin_footer-post.php', 'mch_admin_script_copy_id' );
add_action( 'admin_footer-edit-tags.php', 'mch_admin_script_copy_id' );
endif;



// 項目名の行に追加
if ( !function_exists('mch_manage_list_category_tag_columns') ):
function mch_manage_list_category_tag_columns($columns){
	$index = 2;  // 何列目に表示するか
	return array_merge(
		array_slice($columns, 0, $index),
		array('id' => 'ID'),
		array_slice($columns, $index)
	);
}
add_filter('manage_edit-category_columns', 'mch_manage_list_category_tag_columns');
add_filter('manage_edit-post_tag_columns', 'mch_manage_list_category_tag_columns');
endif;

// IDを表示する＆コピーボタンを追加する
if ( !function_exists('mch_manage_list_category_tag_custom_column') ):
function mch_manage_list_category_tag_custom_column($string, $column_name, $id) {
	if ('id' == $column_name){
		echo "<div><span class=\"button mch-copyId\" data-copy-id=\"{$id}\" >コピー</span></div>";
		echo $id;
	}
}
add_action('manage_category_custom_column', 'mch_manage_list_category_tag_custom_column', 10, 3);
add_action('manage_post_tag_custom_column', 'mch_manage_list_category_tag_custom_column', 10, 3);
endif;


// 並び替えできるようにする
if ( !function_exists('mch_manage_list_category_tag_sortable_columns') ):
function mch_manage_list_category_tag_sortable_columns($columns){
	$columns['id'] = 'ID';
	return $columns;
}
add_filter('manage_edit-category_sortable_columns', 'mch_manage_list_category_tag_sortable_columns');
add_filter('manage_edit-post_tag_sortable_columns', 'mch_manage_list_category_tag_sortable_columns');
endif;

}

 

 

目次に戻る

ソースコードを説明

カテゴリー一覧や投稿一覧ページにIDコピーボタンを追加するカスタマイズに必要な各処理について簡単に説明します。

 

投稿一覧・固定ページ一覧にIDを追加する

WordPressは標準では、投稿一覧や固定ページ一覧画面にIDが表示されません。

テーマのCocoonは有効化するだけでIDが表示されるようになるので、テーマによっては以下のコードは不要です

// CocoonなどIDが表示されているテーマは不要
// 投稿一覧・固定ページ一覧にIDを追加する
if ( !function_exists( 'mch_customize_admin_manage_posts_columns' ) ):
add_filter( 'manage_posts_columns', 'mch_customize_admin_manage_posts_columns');
add_filter( 'manage_pages_columns', 'mch_customize_admin_manage_posts_columns');
function mch_customize_admin_manage_posts_columns($columns) {
	$columns['post-id'] = __( 'ID', THEME_NAME );
	return $columns;
}

add_action( 'manage_posts_custom_column', 'mch_customize_admin_add_column', 10, 2 );
add_action( 'manage_pages_custom_column', 'mch_customize_admin_add_column', 10, 2 );
function mch_customize_admin_add_column($column_name, $post_id) {
	//投稿ID
	if ( 'post-id' == $column_name ) {
		$thum = $post_id;
		echo $thum;
	}
}
endif;

 

コピーボタンを追加する

投稿一覧と固定ページ一覧画面にIDのコピーボタンを追加します。

IDを追加するときと同じ「manage_posts_custom_column」「manage_pages_custom_column」を使用します。

Cocoonはテーマの機能でIDを表示してくれるので、テーマによってはこの処理だけで充分かもしれません。

// コピーボタンを追加する
if ( !function_exists('mch_customize_admin_add_column_id') ):
function mch_customize_admin_add_column_id($column_name, $post_id)
{
	// 投稿ID
	if ( 'post-id' === $column_name ) {
		echo "<div><span class=\"button mch-copyId\" data-copy-id=\"{$post_id}\" >コピー</span></div>";
	}
}
add_action( 'manage_posts_custom_column', 'mch_customize_admin_add_column_id', 10, 2 );
add_action( 'manage_pages_custom_column', 'mch_customize_admin_add_column_id', 10, 2 );
endif;

 

 

目次に戻る

クリップボードに書き込み処理

管理者画面にコピーボタンをクリックした時に、クリップボードにIDを書き込む処理をJavascriptで実行するようにします。

// クリップボードに書き込み処理
if ( !function_exists( 'mch_admin_script_copy_id' ) ):
function mch_admin_script_copy_id(){
	$js =<<<TEXT
<script type="text/javascript">
(function($) {
$(document).on( 'click','.mch-copyId', function(){
	var copyTargetId = $(this).data('copy-id');
	var listener = function(e){
		e.clipboardData.setData("text/plain" , copyTargetId);
		// 本来のイベントをキャンセル
		e.preventDefault();
		// 終わったら一応削除
		document.removeEventListener("copy", listener);
	};
	// コピーのイベントが発生したときに、クリップボードに書き込むようにしておく
	document.addEventListener("copy" , listener);
	// コピー
	document.execCommand("copy");
});
}(jQuery));
</script>
TEXT;
	echo $js;
}
add_action( 'admin_footer-post-new.php', 'mch_admin_script_copy_id' );
add_action( 'admin_footer-post.php', 'mch_admin_script_copy_id' );
add_action( 'admin_footer-edit-tags.php', 'mch_admin_script_copy_id' );
endif;

 

 

カテゴリー・タグ一覧ページに項目名の行に追加

カテゴリー一覧とタグ一覧ページにIDの項目名を追加する処理です。

「manage_edit-category_columns」「manage_edit-post_tag_columns」のfilterで追加します。

// 項目名の行に追加
if ( !function_exists('mch_manage_list_category_tag_columns') ):
function mch_manage_list_category_tag_columns($columns){
	$index = 2;  // 何列目に表示するか
	return array_merge(
		array_slice($columns, 0, $index),
		array('id' => 'ID'),
		array_slice($columns, $index)
	);
}
add_filter('manage_edit-category_columns', 'mch_manage_list_category_tag_columns');
add_filter('manage_edit-post_tag_columns', 'mch_manage_list_category_tag_columns');
endif;

 

 

目次に戻る

IDを表示する＆コピーボタンを追加する

カテゴリー一覧とタグ一覧にIDの番号とコピーボタンを追加します。

「manage_category_custom_column」「manage_post_tag_custom_column」のactionを使って追加します。

// IDを表示する＆コピーボタンを追加する
if ( !function_exists('mch_manage_list_category_tag_custom_column') ):
function mch_manage_list_category_tag_custom_column($string, $column_name, $id) {
	if ('id' == $column_name){
		echo "<div><span class=\"button mch-copyId\" data-copy-id=\"{$id}\" >コピー</span></div>";
		echo $id;
	}
}
add_action('manage_category_custom_column', 'mch_manage_list_category_tag_custom_column', 10, 3);
add_action('manage_post_tag_custom_column', 'mch_manage_list_category_tag_custom_column', 10, 3);
endif;

 

 

目次に戻る

IDコピーボタンを追加するカスタマイズで快適に。

記事IDやカテゴリーIDのコピーが簡単にできるようになって、作業がより快適になりました。

WordPressでサイトを作る際にIDを使わないなら、不要なカスタマイズですが必要なシーンではかなり便利です。

 

一覧ページにIDだけを表示したいなら、こちらのIDを追加するカスタマイズ記事をお読みください。

【WordPress】カテゴリ一覧・タグ一覧ページにIDを表示するカスタマイズ
ワードプレスは標準機能ではカテゴリーやタグ一覧ページにIDは表示されません。 通常は非表示でも問題ないのですが、テーマやプラグインの機能を使うときにIDを指定することがあります。 そんなときに一覧画面にIDを表示させておくと便利です。 この...
dev.macha795.com
2020.05.10

 

それでは、今回はこれまで。

お読みいただき、ありがとうございました。

目次に戻る
購入して本当によかった、おすすめガジェット
購入して本当によかった、おすすめガジェット

おもしろそうなガジェットや生活が便利・快適になりそうなのを見つけると、ついついポチってしまいます。

そんな様々なガジェットの中から、実際に購入して良かったと感じたおすすめのガジェットを紹介します。

＼ 今すぐチェック ／
おすすめガジェットを見る
Amazonで安く買い物する方法

ガジェットなどをAmazonでお得に買い物するには、Amazonギフト券にあらかじめチャージしてから購入するのがおすすめです。

Amazonギフト券は現金でチャージするたびにポイントが 最大2.5％ 貯まります。

現金派やクレカを持てなくても、Amazonギフト券を活用するとお得です！

 
＼ 最大2.5％のポイントバック ／
Amazonギフト券をチャージする
現金なので安心
クレカ無くてもOK
WordPressカスタマイズ
このページをシェアする
プロガジ.DEV

コメント

目次へ
タイトルとURLをコピーしました