Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

Child theme (of block theme)

Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

Child theme (of block theme)

There is a child theme for customizing WordPress.

You can also create a child theme with a block theme. (Emulsion theme supports child theme in version 2.2.0)した)

This page explains the main points about the child theme of emulsion theme.

Minimal child theme

index.php (emulsion テーマのindex.phpのコピー)

<?php

/**
 * Theme emulsion
 * archive template
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

do_action( 'emulsion_template_pre' );
do_action( 'emulsion_template_pre_' . basename( __FILE__, '.php' ) );

get_header();

emulsion_the_theme_supports( 'title_in_page_header' ) ? '' : emulsion_archive_title();


emulsion_action( 'emulsion_article_wrapper_before' );

emulsion_have_posts();

emulsion_action( 'emulsion_article_wrapper_after' );

emulsion_pagination();

get_footer();

style.css

/*
Theme Name:  emulsion child min
Theme URI: http://www.tenman.info/wp3/emulsion/
Author: Tenman
Author URI: http://www.tenman.info/wp3/
Version: 0.2
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: emulsion
*/

note: The emulsion theme loads the child theme’s style.css once the child theme is created, so you don’t need the code to load the child theme’s style.css in functions.php.
This theme will automatically load (theme-slug) .js if it is included in the child theme as well.

General child theme composition

Copy the parent theme’s block-templates, block-template-parts and include them in your child theme. You can also add functions.php if you want.

Now, this child theme configuration includes templates like category.php and category-624.php, which also look like classic theme templates.
I would like to explain the purpose and usage of these files.

Coexistence of HTML template and PHP template

The emulsion theme, category.php, is described as follows.

<?php

$theme_scheme = emulsion_get_theme_operation_mode();
get_template_part( 'template-parts/template', $theme_scheme ) ;

get_template_part関数でincludeするテンプレートは、以下のものです。

updated:2022/2/14 (ver 2.2.4)

template-parts/template-fse.php

<?php get_header( 'fse' ); ?>
<div class="wp-site-blocks">

	<?php emulsion_block_template_part( 'header' ); ?>

	<?php is_user_logged_in() ? printf( '<p style="background:#000;color:#fff">%1$s</p>', 'load PHP template:emulsion/template-parts/template-fse.php' ) : ''; ?>

	<main class="wp-block-group alignfull">
		<?php
		if ( is_attachment() ) {

			emulsion_have_posts();
		} elseif ( is_single() ) {

			emulsion_block_template_part( 'post-content' );
		} elseif ( is_page() ) {

			emulsion_block_template_part( 'page-content' );
		} else {

			emulsion_block_template_part( 'query-post' );
		}
		?>
	</main>

	<?php emulsion_block_template_part( 'footer' ); ?>
</div>
<?php wp_footer(); ?>
</body>
</html>

updated:2022/2/14 (ver 2.2.4)

template-parts/template-transitional.php

<?php get_header(); ?>

<?php emulsion_the_theme_supports( 'title_in_page_header' ) ? '' : emulsion_archive_title(); ?>

<?php is_user_logged_in() ? printf( '<p style="background:#000;color:#fff">%1$s</p>', 'load PHP template:template-transitional.php' ) : ''; ?>

<div class="wp-site-blocks">

	<?php
	if ( is_attachment() ) {

		emulsion_have_posts();
	} elseif ( is_single() ) {

		emulsion_block_template_part( 'post-content' );
	} elseif ( is_page() ) {

		emulsion_block_template_part( 'page-content' );
	} else {

		emulsion_block_template_part( 'query-post' );
	}
	?>

</div>

<?php get_footer(); ?>

updated:2022/2/14 (ver 2.2.4)

template-parts/template.php

このテンプレートは、旧来のPHPテンプレートで表示します。

<?php
get_header();
emulsion_the_theme_supports( 'title_in_page_header' ) ? '' : emulsion_archive_title();

is_user_logged_in() ? printf( '<p style="background:#000;color:#fff">%1$s</p>', 'load PHP template:emulsion/template-parts/template.php' ) : '';
emulsion_action( 'emulsion_article_wrapper_before' );
emulsion_have_posts();
emulsion_action( 'emulsion_article_wrapper_after' );
emulsion_pagination();
get_footer();

In other words, if the template hierarchy has the same priority, in this case, if category.html and category.php exist, the PHP template will take precedence.

So what does it mean to display in a PHP template?

I myself can no longer use the conditional branch tags that the theme had in the past, so I think there is room to use them now.

Imagine, for example, using is_user_logged_in () etc. For non-logged-in users, it’s easy to hide content.

note: The coexistence of CSS and PHP has not been fully tested yet. If you notice any problems, please post them on the theme support forum.

Newly found issues

On the post, page, the article was summarized and the full text could not be displayed

It will be fixed in ver2.2.3. The cause was in the structure of the HTML template.

Fixed 2.2.4

About CSS customization

In the classic theme, the protagonist of CSS was the theme, but in new themes that use HTML templates, CSS is already held in the core, and I think its role has been greatly reduced.

Many people are accustomed to using Customizer’s Additional CSS, but style customization has moved to the full site editor.

Writing additional CSS that does not conflict with editor settings is becoming very difficult.

However, it is unlikely that the CSS adjustment will be 0 under certain conditions. To alleviate this difficulty, the emulsion theme enhances the class of body elements.

The id = “(theme-slug)” is added to the body element. By including this id in the style, the user can add the style with high specificity.

A body class related to the current theme scheme will be added

is-presentation-transitional, is-presentation-fse, is-presentation-theme

A body class related to the current template will be added。

is-tpl-index-php, is-tpl-home_template,is-tpl-single_template ...

Copyright © 2022 Site proudly powered by WordPress