カテゴリー: 独学・メモ

functions.php

nogu コメントをする

コメントアウト「/**/」「//」の箇所にfunctions.phpの内容についてメモしています。　
コメントした箇所で誤りがあった場合は、気づきましたら修正いたします。

/**
* Set the content width based on the theme's design and stylesheet.
*/
if ( ! isset( $content_width ) ) {
$content_width = 648; /* 変数を、子テーマからも定義できるようにするには、以下のように記述しておきます。子テーマの関数ファイルで定義した値が、親テーマよりも優先されるようになります。 */
}

/**
* Set the content width for full width pages with no sidebar.
*/
function sparkling_content_width() {
if ( is_page_template( 'page-fullwidth.php' ) ) {
global $content_width;//global宣言
$content_width = 1008; /* 
（関数の中で名前が決められ、値が利用される変数の事をグローバル変数という。部分テンプレートファイル（header.php）などをグローバル宣言または。$global変数でアクセスする。） */
}
}

add_action( 'template_redirect', 'sparkling_content_width' );//関数の呼び出し

//sparkling_main_content_bootstrap_classesという関数が定義されているかどうか
if ( ! function_exists( 'sparkling_main_content_bootstrap_classes' ) ) :
/**
* Add Bootstrap classes to the main-content-area wrapper.
定義されていない場合はsparkling_main_content_bootstrap_classesを定義
*/
function sparkling_main_content_bootstrap_classes() {
//処理内容(page-fullwidth.php が使われている場合)
if ( is_page_template( 'page-fullwidth.php' ) ) {
return 'col-sm-12 col-md-12';//サイドバーなしのテンプレートを選択したら12フルカラムサイズ
}
return 'col-sm-12 col-md-8';//それ以外カラムのサイズ
}
endif; // sparkling_main_content_bootstrap_classes

if ( ! function_exists( 'sparkling_setup' ) ) :
/**テーマのデフォルトを設定し、さまざまな WordPress 機能のサポートを登録します。
*
* この関数は after_setup_theme フックにフックされていることに注意してください。
* は初期化フックの前に実行されます。 init フックは一部の機能には遅すぎます。
* は投稿サムネイルのサポートを示します。
*/
function sparkling_setup() {

/*
* Make theme available for translation.
* Translations can be filed in the /languages/ directory.
関数で キー名と翻訳ファイルのパスを指定すれば、WordPressで設定されている
ロケールに合わせて表示言語を簡単に差し替えれます。
(WordPressのテーマやプラグインで、翻訳ファイル(*.mo)を含めて多言語表示に対応させる場合)
*/
load_theme_textdomain( 'sparkling', get_template_directory() . '/languages' );

// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );

/**
* Enable support for Post Thumbnails on posts and pages.
*
* @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
*/
add_theme_support( 'post-thumbnails' );

add_image_size( 'sparkling-featured', 750, 410, true );
add_image_size( 'sparkling-featured-fullwidth', 1140, 624, true );
add_image_size( 'tab-small', 60, 60, true ); // Small Thumbnail

// This theme uses wp_nav_menu() in one location.
register_nav_menus(
array(
'primary' => esc_html__( 'Primary Menu', 'sparkling' ),
'footer-links' => esc_html__( 'Footer Links', 'sparkling' ), // secondary nav in footer
)
);

// Enable support for Post Formats.
add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'quote', 'link' ) );

/* Setup the WordPress core custom background feature.
（管理メニューの「外観 > 背景」で設定可能なカスタム背景を利用できるようになります。）*/
add_theme_support(
'custom-background', apply_filters(
'sparkling_custom_background_args', array(
'default-color' => 'F2F2F2',
'default-image' => '',
)
)
);

// Enable support for HTML5 markup.
add_theme_support(
'html5', array(
'comment-list',
'search-form',
'comment-form',
'gallery',
'caption',
)
);

/*
* Let WordPress manage the document title.
* By adding theme support, we declare that this theme does not use a
* hard-coded <title> tag in the document head, and expect WordPress to
* provide it for us.
*/
add_theme_support( 'title-tag' );

// Backwards compatibility for Custom CSS
$custom_css = of_get_option( 'custom_css' );
if ( $custom_css ) {
$wp_custom_css_post = wp_get_custom_css_post();

if ( $wp_custom_css_post ) {
$wp_custom_css = $wp_custom_css_post->post_content . $custom_css;
} else {
$wp_custom_css = $custom_css;
}

wp_update_custom_css_post( $wp_custom_css );

$options = get_option( 'sparkling' );
unset( $options['custom_css'] );
update_option( 'sparkling', $options );

}

}
endif; // sparkling_setup
add_action( 'after_setup_theme', 'sparkling_setup' );/*after_setup_theme<表1-1>フックの場所*/

…省略

アクションフックを使って出力すれば、phpファイル を改変する事なく親テーマに子テーマから任意のコードが追加できます。（親テーマのバージョンアップの影響を受けにくい）

アクションフックとは何ですか？
アクションフックとは

WordPress本体やテーマ、プラグインなど、アクションフックが用意されている場所で任意のPHPを決められたタイミングで処理を実行できるように、予約をするしくみです。

global宣言

<?php
$グローバル変数名 = 値;

function 関数名(){
global $グローバル変数名;
//どの関数からも呼び出す（アクセス）可能
}

関数名();
?>

関数の呼び出しとアクション・フィルタフック

function ■呼び出す関数名■(){
    // ●実行する処理内容●;
}
add_action( '★フックさせたい場所の名前★', '■呼び出す関数名■' );

　　　　　↓呼び出すために定義した関数名
function sparkling_content_width(引数) {
if ( is_page_template( ‘page-fullwidth.php’ ) ) {
global $content_width;//global宣言
$content_width = 1008;
}
}

add_action( ‘template_redirect’, ‘sparkling_content_width‘ );//関数を実行

-----呼び出し関数　header.php これは、functionsで作った関数を別のファイルで呼び出している
<?php echo sparkling_main_content_bootstrap_classes(); ?>">

<表1-1>例として、よく使用されるアクションフックとWordPress関数の組み合わせをまとめました。

アクションフック 関数名 関数の用途
after_setup_theme add_theme_support テーマに機能を設定
add_editor_style ビジュアルエディタのスタイルシートを設定
add_image_size 画像サイズを登録
set_post_thumbnail_size アイキャッチ画像のサイズを設定
register_nav_menus カスタムメニューを追加
widgets_init register_sidebar サイドバーを追加
register_widget ウィジェットを追加
wp_enqueue_scripts wp_enqueue_style 生成したページ内でCSSファイルをロード
wp_enqueue_script 生成したページ内でJavascriptファイルをロード
admin_menu add_menu_page 管理画面のメニューに項目を追加
add_submenu_page 管理画面のサブメニューに項目を追加

参考サイト
https://morilog.com/wordpress/wp_theme_abc/role_of_functions_php/
https://www.vektor-inc.co.jp/post/wordpress-about-action-hook/
https://digipress.info/wordpress/tips/js-translation-in-gutenberg/

※※使用中のテーマで特定の機能を使えるようにする関数です。
add_theme_support()で管理される機能を使うためにはこの関数で設定する必要があります。

アクションフックを使う場合はafter_setup_themeを使用します。（セット・組み合わせ）

ワードプレスをCMSとして使う際、既存のテーマを拝借してカスタマイズすることも多いと思います。そんな時に気になることのひとつに、function.phpで「function_exists」が使われているかどうかということがあるかなと思います。そのテーマを直接カスタマイズするのなら良いのですが、子テーマを使ってカスタマイズする場合にこの「function_exists」が有るのと無いのでは気の持ちようがだいぶ変わってきます。

そもそも function_exists って何？　という方のためにご説明いたしますと、指定した関数が既に定義済みであるかどうかをチェックする関数になります。

1 //function_name_foo という関数が定義されているかどうか
2 if ( ! function_exists( 'function_name_foo' ) ) :
3  
4   //定義されていない場合はfunction_name_fooを定義
5   function function_name_foo() {
6     //処理内容
7   }
8  
9 endif;

サイドバーで使用するアーカイブの表示と設定

nogu コメントをする

ウィジェットを使わない場合
サイドバー (sidebar.php)

…省略
<aside id="archives" class="widget">
<h3 class="widget-title"><?php esc_html_e( 'Archives', 'sparkling' ); ?></h3>
<ul><!-- アーカイブのパラメーターを設定 -->
<?php
$archives_args = array(
'type' => 'monthly',//表示するアーカイブの種類
'format' => 'html', //アーカイブの表示形式
'show_post_count' => true, //投稿数を表示するか
'echo' => 1, //表示するか（1）、値を返すか（0）
'order' => 'DESC', //項目をどの方向に並べるか
);
wp_get_archives( $archives_args );
?>
</ul>
</aside>
か、↓この書き方も可能
<?php wp_get_archives( 'type=monthly&limit=12&show_post_count=1' ); ?>

ウィジェットを使う場合
サイドバーテンプレートの典型的なコード
is_active_sidebarを使ってサイドバー「sidebar-1」に何かウィジェットが入っているか調べて、何か入っていればdynamic_sidebarで表示しています。

// (sidebar.php)
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <div id="secondary" class="widget-area" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div><!-- #secondary -->
<?php endif; ?>

▼functions.phpに定義されたサイドバーウィジェットエリア「sidebar-1」

// (functions.php)
register_sidebar( array(
    'name' => __( 'Main Sidebar', 'twentytwelve' ),//サイドバーの名称。twentytwelveはテキストドメイン省略可能（theme=twentytwelve）テーマ名
    'id' => 'sidebar-1',
    'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

「Main Sidebar」は翻訳ファイルtwentytwelve-ja.poによって「メインサイドバー」と翻訳されます。
結果として、Twenty Twelveで「外観」-「ウィジェット」メニューを開くと「メインサイドバー」が使えるようになっています。