ブログ

WordPressでよく使うfunction

by Yasuko

WordPressでfunction.phpに毎回同じ記述をするのに

何度やっても覚えられない自分のために。

今日もコピペで使えるコードをまとめておきます

常に最新のCSSを読み込ませる

こうしておくと公開後にCSSを修正した際に客先でキャッシュが残っていてうまく表示できない不幸を減らせます。

wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/assets/css/style.css', false, filemtime(get_stylesheet_directory() . '/assets/css/style.css'), false);

カラーパレット追加

function.phpとcssはセットです。

//カラーパレットにオリジナル色を追加
function add_custom_color_palette() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => '古代紫',  //カラーパレットに表示する
            'slug' => 'kodaimurasaki',  //CSSで使用する
            'color' => '#895b8a',  //色の値
        ),
        array(
            'name' => '萌葱色',
            'slug' => 'moegiiro',
            'color' => '#006e54',
        ),
        array(
            'name' => '紅梅色',
            'slug' => 'koubaiiro',
            'color' => '#f2a0a1',
        ),
    ) );
}
add_action( 'after_setup_theme', 'add_custom_color_palette' );
.has-kodaimurasaki-color {
  color: #895b8a;
}
.has-kodaimurasaki-background-color {
  background: #895b8a;
}

.has-moegiiro-color {
  color: #006e54;
}
.has-moegiiro-background-color {
  background: #006e54;
}

.has-koubaiiro-color {
  color: #f2a0a1;
}
.has-koubaiiro-background-color {
  background: #f2a0a1;
}

ナビゲーションメニューを有効にする

function.phpとナビを設置したい場所に wp_nav_menu() 関数を書くのがセットです

さらに管理画面のメニューでメニューが割り当てられていることも必要です

function twpp_setup_theme() {
  register_nav_menus( array(
    'header-navigation' => 'Header Navigation',
    'footer-navigation' => 'Footer Navigation',
    'social-links'      => 'Social Links',
  ) );
}

add_action( 'after_setup_theme', 'twpp_setup_theme' );
<?php 
  wp_nav_menu( array( 
    'theme_location' => 'header-navigation' 
  ) ); 
?>

cssやjsファイルをfunction.phpで読み込み

function.phpに記述

function add_link_files() {

  // CSSの読み込み
  if ( is_home() || is_front_page() ) {
	wp_enqueue_style('slider', get_stylesheet_directory_uri().'/assets/css/slider.css');
  }
  wp_enqueue_style( 'common-style',　get_stylesheet_directory_uri().'/assets/css/common.css' );
  wp_enqueue_style( 'my-style', get_stylesheet_directory_uri().'/assets/css/style.css', array('common'));

  // JavaScriptの読み込み
  if ( is_home() || is_front_page() ) {
	wp_enqueue_script( 'slider', get_template_directory_uri().'/assets/js/slider.js', array('jquery'), false, true );
  }
  wp_enqueue_script( 'my-script', get_template_directory_uri().'/assets/js/script.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );

いつもコピペしてしまうものを随時更新予定です。