FUNCTIONS

functions.php

以下4ファイルに分けてください。必要に応じて追加してください。

 

  • functions.php:テーマのための関数(下記以外の内容)
  • functions-css.php:CSSファイルの呼び出し
  • functions-js.php:JSファイルの呼び出し
  • functions-shortcode.php :自作ショートコード一覧

 

functions.php内に以下タグを入力して各ファイルを呼び出します。

 

if(!is_admin()){
include ( get_template_directory() . '/functions-css.php');//css
include ( get_template_directory() . '/functions-js.php');//js
include ( get_template_directory() . '/functions-shortcode.php');//shortcode
}

 

 

functions-css.php

呼び出し例

 

※wp_register_styleを使う方法でも問題ありません。

参考:wp_register_styleとwp_enqueue_styleの使い方とその違いとは

 

<?php

/* テーマ直下のstyle.css
------------------------------------ */
wp_enqueue_style('style', get_bloginfo('template_directory').'/style.css');

/* uikit
------------------------------------ */
wp_enqueue_style('uikit', 'https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/css/uikit.min.css');

/* original
------------------------------------ */
$cssdir = get_bloginfo('stylesheet_directory').'/css/';

wp_register_style('style-all', $cssdir.'style.css','','','all');

/* webfont
------------------------------------ */
// font-family: 'Noto Serif JP', serif;
wp_enqueue_style('googlefont', 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');

//font-family: 'Material Icons';
wp_enqueue_style('icons', 'https://fonts.googleapis.com/icon?family=Material+Icons');

?>

 

 

 

functions-js.php

呼び出し例

 

※wp_register_scriptを使う方法でも問題ありません。

参考:wp_register_scriptとwp_enqueue_scriptの使い方とその違いとは

 

<?php

/* uikit
------------------------------------ */
wp_enqueue_script('uikit', 'https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit.min.js');
wp_enqueue_script('uikit-ico', 'https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit-icons.min.js');

/* original
------------------------------------ */
wp_enqueue_script('common', get_bloginfo('template_directory').'/js/common.js');

?>

 

 

 

functions-shortcode.php

ページ例(よかったらこのままコピーして利用してください。改変自由)

 

<?php

/* ------------------------------------
■ ショートコード:イメージディレクトリ
<?php echo do_shortcode('[imgdir]'); ?>
------------------------------------ */
function imgdirFunc() {
  return get_bloginfo('stylesheet_directory') . '/img';
}
add_shortcode('imgdir', 'imgdirFunc');

/* ------------------------------------
■ ショートコード:デバイス別改行
スマホのみ[br_p] PCのみ[br_d]
------------------------------------ */
function pbrFunc() {
  if (is_mobile()){
  return '<br />';
  }
}
add_shortcode('br_p', 'pbrFunc');

function dbrFunc() {
  if (!is_mobile()){
  return '<br />';
  }
}
add_shortcode('br_d', 'dbrFunc');


/* ------------------------------------
■ ショートコード:デバイス別表示
スマホのみ[is_p] PCのみ[is_d]
------------------------------------ */
function is_pFunc( $atts, $content = null ) {
  extract( shortcode_atts( array(), $atts ) );
  $content = do_shortcode( shortcode_unautop( $content ) );
return '<div class="is_p">' . $content . '</div>';
}
add_shortcode('is_p', 'is_pFunc');

function is_dFunc( $atts, $content = null ) {
  extract( shortcode_atts( array(), $atts ) );
  $content = do_shortcode( shortcode_unautop( $content ) );
return '<div class="is_d">' . $content . '</div>';
}
add_shortcode('is_d', 'is_dFunc');

/* ------------------------------------
■ ショートコード:DIV
[div class="class" id="id"]●[/div]
------------------------------------ */
function divFunc($atts, $content = null ){
extract( shortcode_atts(array(
'class' => 'default',
), $atts ) );
$content = do_shortcode( shortcode_unautop( $content ) );
return '<div class="'.esc_attr($class).'">' . $content . '</div>';
}
add_shortcode('div', 'divFunc');

/* ------------------------------------
■ ショートコード:span
[span class="class"]●[/span]
------------------------------------ */
function spanFunc($atts, $content = null ){
extract( shortcode_atts(array(
'class' => 'default',
), $atts ) );
$content = do_shortcode( shortcode_unautop( $content ) );
return '<span class="'.esc_attr($class).'">' . $content . '</span>';
}
add_shortcode('span', 'spanFunc');

/* ------------------------------------=
■ ショートコード:uk-modal
[uk-modal id="id"]●[/uk-modal]
------------------------------------ */
function uk_modalFunc($atts, $content = null ){
extract( shortcode_atts(array(
'id' => 'my-id',
), $atts ) );
$content = do_shortcode( shortcode_unautop( $content ) );
return '<div id="'.esc_attr($id).'" uk-modal>' . $content . '</div>';
}
add_shortcode('uk_modal', 'uk_modalFunc');
?>

 

上記ショートコードの解説

 

内容 命名例
イメージディレクトリ
(テンプレート内で利用してソースをわかりやすくする)
[imgdir]
PCのみ改行する [br_d]
スマホのみ改行する [br_p]
PCのみ表示する [is_d]
スマホのみ表示する [is_p]
div [div class="class" id="id"]●[/div]
span [span class="class"]●[/span]
uk-modal
(uikitのモーダル)
[uk-modal id="id"]●[/uk-modal]