WordPressでオリジナルテーマ作成!外観カスタマイズコード一覧。

WordPressの管理画面の【外観】で設定できるようにするコードなど。

調べたら出てくるものもほとんどなので、備忘録のような意味合いもかねて一覧で記載します。

※Wordpressのバージョンアップやプラグインの設定などで、今となっては効かないコードや優先度が変わっている場合もあります。

目次

コード

ウィジェット機能追加

functions.phpに

register_sidebar();

ウィジェットを追加したい場合は、上記を複製するだけ。

register_sidebar();
register_sidebar();

サイドバー1、サイドバー2と自動的にWordPress内の「外観」→「ウィジェット」に表示される。
このサイドバー1とかの名前を変更したい場合は下記

register_sidebar(array('name' => 'メイン'));
register_sidebar(array('name' => 'サブ'));
register_sidebar(array('name' => 'サイドバー'));
ウィジェットで追加した内容の出力
<?php dynamic_sidebar(); ?>

複製したウィジェットをそれぞれ表示する場合。

<?php dynamic_sidebar(1); ?> //サイドバー1を出力
<?php dynamic_sidebar(2); ?> //サイドバー2を出力

ウィジェットの名前変更した場合の出力は

<?php dynamic_sidebar('メイン'); ?>
<?php dynamic_sidebar('サブ'); ?>
<?php dynamic_sidebar('サイドバー'); ?>
「外観」→「メニュー」の使用を可能にする

functions.phpに下記を記載

register_nav_menu('navigation','ナビゲーション');
「外観」→「メニュー」の出力

表示したい部分に下記を記載

<?php wp_nav_menu('theme_location=navigation');?>
「外観」→「ヘッダー」で画像管理

functions.phpに下記を記載

add_theme_support( 'custom-header' );
「外観」→「ヘッダー」の画像出力

出力したい部分に下記入力

  <?php if( get_header_image() ):?>
  <img src="<?php header_image() ;?>">
  <?php endif; ?>
【外観】→【テーマファイルエディター】で新規ファイルを追加したい場合

通常はローカルなどで作ったファイルをFTP(ファイルマネージャー)でアップロードします。
ただ、クライアントのWordpressなどでどうしてもFTPが繋げない。だけど、ファイルを新規追加したい。
そのような時に使います。

functions.phpに下記を追記して、ファイルを更新をクリック

touch( get_stylesheet_directory() . '/新規追加ファイル名.php' );

これで、「新規追加ファイル名.php」という名前のファイルが追加される。
追加された後は、functions.phpから上記の記述を消してファイルを更新をクリックしても、追加したファイルは消えない。

管理画面の投稿を作成する画面にjavascriptを適用したい場合

投稿内に記載ではなく、その投稿作成画面自体に何らかのjavascriptの指示を送りたい場合です。

functions.phpに下記を追記して、ファイルを更新をクリック

function my_admin_enqueue( $hook_suffix ) {
  if ( 'post.php' === $hook_suffix || 'post-new.php' === $hook_suffix ) { 
   wp_enqueue_script('custom_js', get_template_directory_uri() . '/○○.js', array('jquery'));
   
   }
add_action( 'admin_enqueue_scripts', 'my_admin_enqueue' );

赤字になっている【/○○.js】は送りたい指示のjavascriptの記述が書かれたファイル名です。

例えば、script.jsというファイルの場合は、script.jsはFTPでアップロードして、【/script.js】と記載します。
階層には注意です。

functions.phpを子テーマで編集する場合は、下記の青字の部分のようにしてください。

function my_admin_enqueue( $hook_suffix ) {
  if ( 'post.php' === $hook_suffix || 'post-new.php' === $hook_suffix ) { 
   wp_enqueue_script('custom_js', get_stylesheet_directory_uri() . '/○○.js', array('jquery'));
   
   }
add_action( 'admin_enqueue_scripts', 'my_admin_enqueue' );
目次