【AFFINGER6&管理画面カスタム】投稿記事一覧ページに記事URL・パーマリンクの列を追加する方法

親テーマのfunction.phpで該当箇所を確認

//投稿一覧に「サムネイル」「ID」「文字数」の3項目を追加
if ( !function_exists( 'st_add_posts_columns' ) ) {
	function st_add_posts_columns($columns, $post_type) {

まずは親まずは親テーマのフォルダに入っているfunction.phpを自分のPCにダウンロードする。直接、親テーマを開いてもいいが、万が一のことを考えてローカルに持っていく。

ダウンロードしたファイルで投稿記事一覧の列（カラム）を追加している箇所を探す。AFFINGER6の場合は「投稿一覧に」の語句でファイル内検索をかけると見つかる。上の部分がそうだ。

該当箇所に記事URL列追加コードを追加

//追加内容
$columns['permlink'] = 'URL';

.fixed .column-permlink {width: 5%;}

該当箇所に記事URLを列に追加するコードを追加する。AFFINGER6の場合は初めからサムネイルとIDと文字数が追加されているので、これに倣ってURL列を追加。

ついでに初めのifの上のコメントアウトにURLを追加する旨を書いておいてもいいだろう。なお、= ‘URL’の部分が列名になる。

//投稿一覧に「サムネイル」「ID」「文字数」の3項目を追加+記事URL追加
if ( !function_exists( 'st_add_posts_columns' ) ) {
	function st_add_posts_columns($columns, $post_type) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && post_type_supports( $post_type, 'thumbnail' ) ) {
			$columns['thumbnail'] = 'サムネイル';
		}

		$columns['postid'] = 'ID';

		$columns['permlink'] = 'URL';

		if ( $show_extra_columns && post_type_supports( $post_type, 'editor' ) ) {
			$columns['count'] = '文字数';
		}

		echo '<style type="text/css">
		.fixed .column-thumbnail {width: 120px;}
		.fixed .column-postid {width: 5%;}
		.fixed .column-count {width: 5%;}
		.fixed .column-permlink {width: 5%;}
		</style>';

		return $columns;
	}
}

投稿記事一覧の下のコードにも記事URLのコードを追加

// 追加内容
} elseif ('permlink' === $column_name ) {
			echo get_permalink();

今のままだと単に列が追加されただけなので、各記事のURLを各行に追加するコードを追加する。

echo esc_html( $post_id );の後に記事URL用の処理を追加する。記事URLの取得はget_permalinkで可能なのでこれを追記するのみ。

if ( !function_exists( 'st_add_posts_columns_row' ) ) {
	function st_add_posts_columns_row($column_name, $post_id) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && 'thumbnail' === $column_name ) {
			$thumb = get_the_post_thumbnail($post_id, array(100,100), 'thumbnail');
			echo ( $thumb ) ? $thumb : '−';
		} elseif ( 'postid' === $column_name ) {
			echo esc_html( $post_id );
		} elseif ('permlink' === $column_name ) {
			echo get_permalink();
		} elseif ( $show_extra_columns && 'count' === $column_name ) {
			$count = esc_html( mb_strlen(strip_tags(get_post_field('post_content', $post_id))) );
		echo $count;
		}
	}
}

テーマファイルエディターへ移動

WordPress管理画面の「外観」「テーマファイルエディター」から子テーマのfunction.phpに移動。

子テーマのfunction.phpは親テーマのfunction.phpを引き継ぐので、最悪ミスってもその部分を丸々削除してしまえば大丈夫。その点は子テーマの方が楽である。

子テーマに列追加後のコードを追加

子テーマのfunction.phpに記事URL列を追加し各記事のURLを表示するようにしたコードを追記。丸々貼り付ければいい。

追記できたらファイルを更新して変更内容を保存する。

//投稿一覧に「サムネイル」「ID」「文字数」の3項目を追加+記事URL追加
if ( !function_exists( 'st_add_posts_columns' ) ) {
	function st_add_posts_columns($columns, $post_type) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && post_type_supports( $post_type, 'thumbnail' ) ) {
			$columns['thumbnail'] = 'サムネイル';
		}

		$columns['postid'] = 'ID';

		$columns['permlink'] = 'URL';

		if ( $show_extra_columns && post_type_supports( $post_type, 'editor' ) ) {
			$columns['count'] = '文字数';
		}

		echo '<style type="text/css">
		.fixed .column-thumbnail {width: 120px;}
		.fixed .column-postid {width: 5%;}
		.fixed .column-count {width: 5%;}
		.fixed .column-permlink {width: 5%;}
		</style>';

		return $columns;
	}
}
if ( !function_exists( 'st_add_posts_columns_row' ) ) {
	function st_add_posts_columns_row($column_name, $post_id) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && 'thumbnail' === $column_name ) {
			$thumb = get_the_post_thumbnail($post_id, array(100,100), 'thumbnail');
			echo ( $thumb ) ? $thumb : '−';
		} elseif ( 'postid' === $column_name ) {
			echo esc_html( $post_id );
		} elseif ('permlink' === $column_name ) {
			echo get_permalink();
		} elseif ( $show_extra_columns && 'count' === $column_name ) {
			$count = esc_html( mb_strlen(strip_tags(get_post_field('post_content', $post_id))) );
		echo $count;
		}
	}
}

親テーマのfunction.phpで該当箇所を確認

//投稿一覧に「サムネイル」「ID」「文字数」の3項目を追加
if ( !function_exists( 'st_add_posts_columns' ) ) {
	function st_add_posts_columns($columns, $post_type) {

まずは親テーマのフォルダに入っているfunction.phpを自分のPCにダウンロードする。直接、親テーマを開いてもいいが、万が一のことを考えてローカルに持っていく。

ダウンロードしたファイルで投稿記事一覧の列（カラム）を追加している箇所を探す。AFFINGER6の場合は「投稿一覧に」の語句でファイル内検索をかけると見つかる。上の部分がそうだ。

該当箇所に記事URL列追加コードを追加

//追加内容
$columns['permlink'] = 'URL';

.fixed .column-permlink {width: 5%;}

該当箇所に記事URLを列に追加するコードを追加する。AFFINGER6の場合は初めからサムネイルとIDと文字数が追加されているので、これに倣ってURL列を追加。

ついでに初めのifの上のコメントアウトにURLを追加する旨を書いておいてもいいだろう。なお、= ‘URL’の部分が列名になる。

//投稿一覧に「サムネイル」「ID」「文字数」の3項目を追加+記事URL追加
if ( !function_exists( 'st_add_posts_columns' ) ) {
	function st_add_posts_columns($columns, $post_type) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && post_type_supports( $post_type, 'thumbnail' ) ) {
			$columns['thumbnail'] = 'サムネイル';
		}

		$columns['postid'] = 'ID';

		$columns['permlink'] = 'URL';

		if ( $show_extra_columns && post_type_supports( $post_type, 'editor' ) ) {
			$columns['count'] = '文字数';
		}

		echo '<style type="text/css">
		.fixed .column-thumbnail {width: 120px;}
		.fixed .column-postid {width: 5%;}
		.fixed .column-count {width: 5%;}
		.fixed .column-permlink {width: 5%;}
		</style>';

		return $columns;
	}
}

投稿記事一覧の下のコードにも記事URLのコードを追加

// 追加内容
} elseif ('permlink' === $column_name ) {
			echo get_permalink();

今のままだと単に列が追加されただけなので、各記事のURLを各行に追加するコードを追加する。

echo esc_html( $post_id );の後に記事URL用の処理を追加する。記事URLの取得はget_permalinkで可能なのでこれを追記するのみ。

if ( !function_exists( 'st_add_posts_columns_row' ) ) {
	function st_add_posts_columns_row($column_name, $post_id) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && 'thumbnail' === $column_name ) {
			$thumb = get_the_post_thumbnail($post_id, array(100,100), 'thumbnail');
			echo ( $thumb ) ? $thumb : '−';
		} elseif ( 'postid' === $column_name ) {
			echo esc_html( $post_id );
		} elseif ('permlink' === $column_name ) {
			echo get_permalink();
		} elseif ( $show_extra_columns && 'count' === $column_name ) {
			$count = esc_html( mb_strlen(strip_tags(get_post_field('post_content', $post_id))) );
		echo $count;
		}
	}
}

テーマファイルエディターへ移動

記事URLの列と各記事の記事URLの行を追加できたら親テーマのfunction.phpのあるフォルダに移動する。

WordPress管理画面のテーマファイルエディターからでもいいし、ConoHa WINGならファイルマネージャー機能で移動してもいい。FTPでもいい。

執筆者はConoHa WINGなのでファイルマネージャー機能で見やすくしながらfunction.phpのあるフォルダに移動した。

親テーマに列追加後のコードを追加

親テーマのfunction.phpを開いて該当箇所を列追加後のコードで上書きする。上書きなので今回の場合は記事URL

部分の処理が増えるだけだ。

上書きできたら保存する。ConoHa WINGのファイルマネージャーの場合は「保存」と「保存して閉じる」の2種類あるが、エラーになった際にすぐに修正できるよう「保存」を押すのをおすすめする。

//投稿一覧に「サムネイル」「ID」「文字数」の3項目を追加
if ( !function_exists( 'st_add_posts_columns' ) ) {
	function st_add_posts_columns($columns, $post_type) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && post_type_supports( $post_type, 'thumbnail' ) ) {
			$columns['thumbnail'] = 'サムネイル';
		}

		$columns['postid'] = 'ID';

		$columns['permlink'] = 'URL';

		if ( $show_extra_columns && post_type_supports( $post_type, 'editor' ) ) {
			$columns['count'] = '文字数';
		}

		echo '<style type="text/css">
		.fixed .column-thumbnail {width: 120px;}
		.fixed .column-postid {width: 5%;}
		.fixed .column-count {width: 5%;}
		.fixed .column-permlink {width: 5%;}
		</style>';

		return $columns;
	}
}
if ( !function_exists( 'st_add_posts_columns_row' ) ) {
	function st_add_posts_columns_row($column_name, $post_id) {
		$show_extra_columns = ( get_option( 'st-data129', '' ) === 'yes' );

		if ( $show_extra_columns && 'thumbnail' === $column_name ) {
			$thumb = get_the_post_thumbnail($post_id, array(100,100), 'thumbnail');
			echo ( $thumb ) ? $thumb : '−';
		} elseif ( 'postid' === $column_name ) {
			echo esc_html( $post_id );
		} elseif ('permlink' === $column_name ) {
			echo get_permalink();
		} elseif ( $show_extra_columns && 'count' === $column_name ) {
			$count = esc_html( mb_strlen(strip_tags(get_post_field('post_content', $post_id))) );
		echo $count;
		}
	}
}

投稿記事一覧ページで動作を確認

投稿記事一覧ページに移動して記事URL列と各記事のリンクが表示されているか確認。正常に表示されていれば完了だ。