Raindropsテーマは、functions.phpだけでも、コードは10000行以上あり、作っている私でも訳が分からなくなることがあります。
Raindropsのメンテナンスを行っている私は、どのようにしてテーマの機能の追加を行っているのかについて、
チャイルドテーマを使って、機能の追加を行っています はぁ？、チャイルドテーマっていうのは、テンプレート、スタイルシート、プラグアブル関数類だけでしょ、javascriptやカスタマイザー用のphpとかは、チャイルドテーマからはいじれないんじゃないんですか？
そこが、Raindropsテーマの変態なところなんです。 Raindropsテーマは、テンプレートに限らず、phpファイルなどでも、チャイルドテーマにコピーすると、チャイルドテーマのファイルを読み込むようになっているので、 必要なファイルは、チャイルドテーマにコピーして、機能の追加を行い、うまく動作したところで、それらのファイルを、親テーマに戻してあげるという事が可能なのです。
例：カテゴリーアーカイブが表示された時にだけ、javascriptで alert('hello world'); を表示してみましょう
- ホルダーの作成(alert-raindrops)
- style.cssの作成
/* Theme Name: Alert raindrops Description: カテゴリーアーカイブが表示された時にだけ、javascriptで alert('hello world'); を表示 Author: Tenman Author URI: https://www.tenman.info/wp3/ Version: 0.1 License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: alert-raindrops Template: raindrops/
親テーマのスタイルは、チャイルドテーマの場合、自動でロードされますので、何も設定しなくていいです。
- raindrops-helper.jsをチャイルドテーマにコピー
Raindropsテーマには、raindrops.js と、raindrops-helper.js の2種類があります。
raindrops.jsは、jqueryの単純なスクリプトを書くためのもの、raindrops-helper.jsは、テーマの状態や、javascriptに翻訳が必要な場合に使用します。
今回は、raindrops-helper.js を使いますので、関連する関数 function raindrops_load_small_device_helper() を functions.phpから、チャイルドテーマのfunctions.phpにコピーします。
function raindrops_load_small_device_helper() { global $raindrops_current_data_version, $is_IE, $raindrops_fluid_maximum_width, $raindrops_browser_detection, $post, $template, $raindrops_link_unique_text, $raindrops_fallback_image_for_entry_content_enable,$raindrops_fallback_human_interface_show; if( true== $raindrops_fallback_human_interface_show ) { return; } $raindrops_header_image = get_custom_header(); $raindrops_header_image_uri = $raindrops_header_image->url; $ratio = 0; if ( empty( $raindrops_header_image_uri ) ) { $raindrops_header_image_uri= get_header_image(); } $raindrops_header_image_width = apply_filters( 'raindrops_header_image_width', raindrops_detect_header_image_size( 'width' ) ); $raindrops_header_image_height = apply_filters( 'raindrops_header_image_height', raindrops_detect_header_image_size( 'height' ) ); $raindrops_field_exists_check = get_post_custom_values( '_raindrops_this_header_image' ); if ( $raindrops_field_exists_check !== null ) { $display_header_image_file= get_post_meta( $post->ID, '_raindrops_this_header_image', true ); if ( !empty( $display_header_image_file ) && $display_header_image_file !== 'default' && is_singular() ) { $display_header_image_attr= wp_get_attachment_image_src( $display_header_image_file, 'full' ); if ( ! empty( $display_header_image_attr ) ) { $raindrops_header_image_uri = esc_url( $display_header_image_attr[ 0 ] ); $raindrops_header_image_width = absint( $display_header_image_attr[ 1 ] ); $raindrops_header_image_height = absint( $display_header_image_attr[ 2 ] ); } } } $raindrops_restore_check= get_theme_mod( 'header_image', get_theme_support( 'custom-header', 'default-image' ) ); if ( $raindrops_restore_check !== 'remove-header' ) { if ( $raindrops_header_image_width > 0 && $raindrops_header_image_height > 0 ) { $ratio= $raindrops_header_image_height / $raindrops_header_image_width; } else { $ratio= 0; } } $raindrops_current_template= basename( $template, '.php' ); if ( $raindrops_current_template== 'list_of_post' ) { $raindrops_ignore_template= true; } else { $raindrops_ignore_template= false; } $color_type = ''; if ( false !== ($type= raindrops_has_indivisual_notation() ) ) { if( isset( $type['color_type'] ) ) { $color_type .= sanitize_html_class( "rd-type-" . $type['color_type'] ); } if( isset( $type['col'] ) ) { $color_type .= ' '; $color_type .= sanitize_html_class( "rd-col-" . $type['col'] ); } } else { $raindrops_style_type= raindrops_warehouse_clone( 'raindrops_style_type' ); if( ! empty( $raindrops_style_type ) ) { $color_type= esc_attr( "rd-type-" . $raindrops_style_type ); } } $raindrops_page_width= raindrops_warehouse_clone( 'raindrops_page_width' ); if ( false !== ( $url= raindrops_locate_url( 'raindrops-helper.js' ) ) ) { wp_enqueue_script( 'raindrops_helper_script', $url, array( 'jquery' ),$raindrops_current_data_version, true ); } if( $raindrops_browser_detection== true ){ $raindrops_browser_detection= 1; }else{ $raindrops_browser_detection= 0; } if( is_singular()== true ) { $raindrops_is_singular= 1; }else{ $raindrops_is_singular= 0; } if( is_single()== true ) { $raindrops_is_single= 1; }else{ $raindrops_is_single= 0; } if( is_page()== true ) { $raindrops_is_page= 1; }else{ $raindrops_is_page= 0; } $raindrops_link_unique_text= raindrops_link_unique_text(); /* @1.328 */ if( true== $raindrops_fallback_image_for_entry_content_enable ) { $raindrops_fallback_image_for_entry_content= esc_url( raindrops_warehouse_clone( 'raindrops_fallback_image_for_entry_content' ) ); } else { $raindrops_fallback_image_for_entry_content= false; } if ( wp_is_mobile() ) { $kind_of_browser= 'rd-mobile'; } else { $kind_of_browser= 'rd-pc'; } /* comments */ if( 1== get_option('require_name_email') ){ $raindrops_required_name_email= 1; } else { $raindrops_required_name_email= 0; } /* menu percent font size */ $raindrops_menu_primary_font_size = absint( raindrops_warehouse_clone( 'raindrops_menu_primary_font_size' ) ); $raindrops_menu_primary_font_size = $raindrops_menu_primary_font_size / 100; /* base font size of pixel */ $raindrops_basefont_size = raindrops_warehouse_clone( 'raindrops_basefont_settings' ); $raindrops_current_menu_font_size = (float) $raindrops_basefont_size * $raindrops_menu_primary_font_size ; $raindrops_current_menu_button_height = $raindrops_current_menu_font_size * 3.4; //3.4 is line-height $raindrops_menu_height_check_value= apply_filters('raindrops_menu_height_check_value', absint( $raindrops_current_menu_button_height * 1.8 ), $raindrops_basefont_size, $raindrops_menu_primary_font_size ); //near 2 line wp_localize_script( 'raindrops_helper_script', 'raindrops_script_vars', array( 'is_ie' => $is_IE, 'fluid_maximum_width' => $raindrops_fluid_maximum_width, 'browser_detection' => $raindrops_browser_detection, 'template' => $template, 'link_unique_text' => $raindrops_link_unique_text, 'header_image_uri' => $raindrops_header_image_uri, 'header_image_width' => $raindrops_header_image_width, 'header_image_height' => $raindrops_header_image_height, 'field_exists_check' => $raindrops_field_exists_check, 'restore_check' => $raindrops_restore_check, 'ratio' => apply_filters( 'raindrops_header_image_ratio', $ratio ), 'has_ratio_filter' => has_filter( 'raindrops_header_image_ratio' ), 'current_template' => $raindrops_current_template, 'ignore_template' => $raindrops_ignore_template, 'is_single' => $raindrops_is_single, 'is_page' => $raindrops_is_page, 'is_singular' => $raindrops_is_singular, 'browser_detection' => $raindrops_browser_detection, 'color_type' => $color_type, 'page_width' => $raindrops_page_width, 'accessibility_settings' => raindrops_warehouse_clone( 'raindrops_accessibility_settings' ), 'fallback_image_for_entry_content' => $raindrops_fallback_image_for_entry_content, 'blockquote_cite_i18n' => esc_html__( 'cite:', 'raindrops' ), 'kind_of_browser' => $kind_of_browser, 'require_name_email' => $raindrops_required_name_email, 'placeholder_text_message' => esc_html__( "Message", 'raindrops' ), 'placeholder_text_required_message' => esc_html__( "Required Your Message", 'raindrops' ), 'placeholder_text_comment_name' => esc_html__( "Name", 'raindrops' ), 'placeholder_text_required_comment_name'=> esc_html__( "Required Your Name", 'raindrops' ), 'placeholder_text_email' => esc_html__( "Email Address", 'raindrops' ), 'placeholder_text_required_email' => esc_html__( "Required Your Email", 'raindrops' ), 'placeholder_text_url' => esc_html__( "Website", 'raindrops' ), 'home_url' => home_url(), 'content_shareing' => raindrops_content_shareing(), 'raindrops_primary_menu_responsive' => raindrops_warehouse_clone( 'raindrops_primary_menu_responsive' ), 'raindrops_primary_menu_responsive_height'=> $raindrops_menu_height_check_value, 'raindrops_raindrops_sticky_menu' => raindrops_warehouse_clone( 'raindrops_sticky_menu' ), ) ); wp_reset_postdata( ); } -
wp_localize_scriptの三番目の配列に、カテゴリーアーカイブである事をjavascripに伝えるために、項目を追加します。
'raindrops_raindrops_sticky_menu' => raindrops_warehouse_clone( 'raindrops_sticky_menu' ), 'is_category' => is_category(),//これを追加 ) ); wp_reset_postdata( );
- それでは、raindrops-helper.jsに、alertを追加します。
jQuery( function ( $ ) { if( raindrops_script_vars.is_category ) { alert('hello world'); } } );
これで、カテゴリーアーカイブを表示した時だけ アラートが表示されます。
あとは、ワードプレスの、現行バージョンや、開発者バージョンで、テストを重ねていって問題が無い事を確認します。
チャイルドテーマなので、サイトの移動が簡単です。
すべてのテストが終了したら、
チャイルドテーマのファイルを、親テーマに貼り付けて、新しいバージョン番号を追加する といった形でテーマはアップデートします。
