Raindropsのお得なテクニック

Raindropsテーマは、functions.phpだけでも、コードは10000行以上あり、作っている私でも訳が分からなくなることがあります。

Raindropsのメンテナンスを行っている私は、どのようにしてテーマの機能の追加を行っているのかについて、


チャイルドテーマを使って、機能の追加を行っています はぁ?、チャイルドテーマっていうのは、テンプレート、スタイルシート、プラグアブル関数類だけでしょ、javascriptやカスタマイザー用のphpとかは、チャイルドテーマからはいじれないんじゃないんですか?

そこが、Raindropsテーマの変態なところなんです。 Raindropsテーマは、テンプレートに限らず、phpファイルなどでも、チャイルドテーマにコピーすると、チャイルドテーマのファイルを読み込むようになっているので、 必要なファイルは、チャイルドテーマにコピーして、機能の追加を行い、うまく動作したところで、それらのファイルを、親テーマに戻してあげるという事が可能なのです。


例:カテゴリーアーカイブが表示された時にだけ、javascriptで alert('hello world'); を表示してみましょう
  1. ホルダーの作成(alert-raindrops)
  2. 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
    
    

    /

    親テーマのスタイルは、チャイルドテーマの場合、自動でロードされますので、何も設定しなくていいです。

  3. 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( );
    	}
  4. wp_localize_scriptの三番目の配列に、カテゴリーアーカイブである事をjavascripに伝えるために、項目を追加します。

    			'raindrops_raindrops_sticky_menu'		=> raindrops_warehouse_clone( 'raindrops_sticky_menu' ),
    			'is_category'						=> is_category(),//これを追加
    		) );
    
    		wp_reset_postdata( );
  5. それでは、raindrops-helper.jsに、alertを追加します。
    jQuery( function ( $ ) {
     
     if( raindrops_script_vars.is_category ) {
    alert('hello world');
     }
    } );

これで、カテゴリーアーカイブを表示した時だけ アラートが表示されます。

あとは、ワードプレスの、現行バージョンや、開発者バージョンで、テストを重ねていって問題が無い事を確認します。

チャイルドテーマなので、サイトの移動が簡単です。

すべてのテストが終了したら、

チャイルドテーマのファイルを、親テーマに貼り付けて、新しいバージョン番号を追加する といった形でテーマはアップデートします。


コメントは受け付けていません。