メモ > 技術 > CMS: WordPress > カスタマイズ（外観）
カスタマイズ（外観）
■メニューを管理する
管理画面からメニューを登録管理できる。
あらかじめテーマに専用の記述をしておけば、その内容がユーザ側にも反映される。
[WordPress]カスタムメニュー機能の設定と設置と書き出されるソースコードを分かりやすく紹介します | オレインデザイン
https://olein-design.com/blog/register-setting-souce-code-of-custom-menu
WordPressのナビゲーションメニューを設定する方法をどこよりも詳しく書いた | Pasolack-パソラック-
https://pasolack.com/wordpress/menu/
function.php に以下を記述しておく
function setup_nav_menus() {
register_nav_menus( array(
'global' => 'グローバルナビ',
'header' => 'ヘッダーナビ',
'footer' => 'フッターナビ',
) );
}
add_action( 'after_setup_theme', 'setup_nav_menus' );
「外観 → メニュー」からメニューを管理できる。
メニューはいくつでも作成でき、上の記述の場合は「global」「header」「footer」の3つの表示場所ができる。
例えばテーマに以下のように記述すると、「global」に割り当てたメニューが表示される。
<div class="global-navi">
<?php
wp_nav_menu( array(
'menu_id' => 'test', // メニュを構成するul要素につけるID名
'container' => 'div', // ulを囲う要素を指定。div もしくは nav。なしの場合には false
'theme_location' => 'global', // メニュー位置を指定
'depth' => 0, // 何階層まで表示するか。0は全階層、1は親メニューまで、2は子メニューまで
) );
?>
</div>
■ヘッダー画像を管理する
WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ！ | オリジナルゲーム.com
https://original-game.com/wordpress-custom-header/
Wordpressで「画像を切り抜く際にエラーが発生しました。」の対処方法 │ Web備忘録
https://webbibouroku.com/Blog/Article/wordpress-php-gd
管理画面からヘッダーを更新できる。
function.php に以下を記述しておく。
$custom_header_args = array(
// デフォルトで表示するヘッダー画像(画像のURLを入力)
'default-image' => get_template_directory_uri() . '/images/default.jpg',
// ヘッダー画像の横幅
'width' => 500,
// ヘッダー画像の縦幅
'height' => 240,
// ヘッダー画像の横幅を自由なサイズで切り取れるかどうか
'flex-width' => true,
// ヘッダー画像の縦幅を自由なサイズで切り取れるかどうか
'flex-height' => true,
// ヘッダーテキストを表示するかどうかを指定する機能の使うかどうか
'header-text' => true,
// ヘッダーテキストのデフォルトの色
'default-text-color' => '000',
);
add_theme_support( 'custom-header', $custom_header_args );
「外観 → ヘッダー」からヘッダー画像を管理できる。
「外観 → カスタマイズ → 色」からヘッダーの文字色を管理できる。
例えばテーマに以下のように記述すると、管理画面で設定したヘッダ画像やテキストが表示される。
<?php if ( get_header_image() ) : ?>
<h1><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></h1>
<p style="color: #<?php echo get_header_textcolor() ?>;"><?php bloginfo( 'description' ); ?></p>
<?php endif; ?>
■管理画面のメニューを非表示にする
【WordPress】管理画面メニューのカスタマイズ - Qiita
https://qiita.com/konweb/items/5483efbe87087eff5cc8
function.php に以下を記述しておく。
function remove_menus() {
remove_menu_page( 'index.php' ); // ダッシュボード
remove_menu_page( 'edit.php' ); // 投稿
remove_menu_page( 'upload.php' ); // メディア
remove_menu_page( 'edit.php?post_type=page' ); // 固定ページ
remove_menu_page( 'edit-comments.php' ); // コメント
remove_menu_page( 'themes.php' ); // 外観
remove_menu_page( 'plugins.php' ); // プラグイン
remove_menu_page( 'users.php' ); // ユーザー
remove_menu_page( 'tools.php' ); // ツール
remove_menu_page( 'options-general.php' ); // 設定
}
add_action( 'admin_menu', 'remove_menus' );
■管理画面のメニューを整理する
プラグインで管理画面のメニューを簡単整理！「Admin Menu Editor」がお手軽でおすすめ（WordPress）
http://room9.jp/2014/02/26/080000/
■管理画面のメニューにある「投稿」の表記を変更する
管理画面の「投稿」のラベルを変更する | WordPressカスタマイズ事典
http://wpcj.net/1171
■テーマのカスタマイズメニューを非表示にする
function.php に以下を記述しておく。
function customize_register_custom_demo( $wp_customize ) {
//サイト基本情報
$wp_customize->remove_section('title_tagline');
//色
$wp_customize->remove_section('colors');
//背景画像
$wp_customize->remove_section('background_image');
//ヘッダーメディア
$wp_customize->remove_section('header_image');
//メニュー
remove_action( 'customize_register', array( $wp_customize->nav_menus, 'customize_register' ), 11 );
//ウィジェット
$wp_customize->remove_panel('widgets');
//固定フロントページ
$wp_customize->remove_section('static_front_page');
//追加CSS
$wp_customize->remove_section('custom_css');
}
add_action( 'customize_register', 'customize_register_custom_demo' );
カスタマイズメニュー内だけではなく、
管理画面のメニューからも非表示にしたければ「管理画面のメニューを非表示にする」を参照。
■管理画面のダッシュボードにウィジェットを追加する
【WordPress】管理画面のダッシュボードに任意のボックスを追加する方法 | ワープレ屋
https://worpreya.com/add-an-arbitrary-box-to-the-dashboard/
function.php に以下を記述しておく。
function my_custom_dashboard_widgets() {
wp_add_dashboard_widget( 'custom_help_widget', '見出しテキスト', 'my_custom_dashboard_text' );
}
function my_custom_dashboard_text() {
echo '<p>本文テキスト。<br>本文テキスト。</p>';
}
add_action( 'wp_dashboard_setup', 'my_custom_dashboard_widgets' );
■管理画面の投稿一覧画面に列を追加する
【WordPress】投稿一覧に情報を表示するカラム（列）を追加する方法 | よしあかつき
https://yosiakatsuki.net/blog/add-posts-column/
※「カラムの追加位置を調整したい場合」のプログラムが複雑そうだが、もっと簡単に以下のように書けそう。
function.php に以下を記述しておく。
function my_manage_posts_columns( $columns ) {
$columns += array( 'my_column' => '追加カラム' ); // 最後に追加する場合
//array_splice($columns, 2, 0, array( 'my_column' => '追加カラム' )); // 3番目に追加する場合（先頭は0）
return $columns;
}
add_filter( 'manage_posts_columns', 'my_manage_posts_columns' );
function my_manage_posts_custom_column( $column, $post_id ) {
switch ( $column ) {
case 'my_column' :
echo '記事' . intval($post_id) . 'の追加カラム';
break;
}
}
add_action( 'manage_posts_custom_column', 'my_manage_posts_custom_column', 10, 2 );
■管理画面の投稿画面にボックスを追加する
WordPressの編集画面にメタボックスを追加する方法 | HPcode
https://haniwaman.com/add-meta-box/
WordPress カスタムフィールドの使い方/ Web Design Leaves
http://www.webdesignleaves.com/pr/wp/wp_custom_fields.html
function.php に以下を記述しておく。
function my_meta_box(){
add_meta_box( 'my_meta_box', 'テスト', 'my_meta_box_in', 'post', 'side', 'low' );
}
function my_meta_box_in($post){
echo '記事' . $post->ID . 'のメタボックス';
}
add_action( 'admin_menu', 'my_meta_box' );