IM-BASE IM-BASE

お問い合わせ

Parts

A developer guide to the reusable PHP templates and SCSS components included with IM Base.

Overview

In IM Base, Parts are reusable building blocks used for theme output and styling. PHP template parts are reusable presentation templates stored under template-parts/. Theme templates and shortcode wrappers can reuse these templates to avoid duplicating markup.

SCSS parts are reusable UI component styles stored under assets/scss/parts/. Some have related PHP templates, such as breadcrumb, news-list, page-header, pager, post-list, share, sns-links, and page-top. The directories are not a one-to-one map: SCSS also includes styling-only or behavior-related parts such as drawer-button, header-logo, overlay, sidebar, table-of-contents, parallax, and scroll-animation, while PHP includes templates such as mobile-nav and header variants.

PHP Template Parts

PHP template parts are reusable presentation templates stored in the template-parts directory. Theme templates load them with WordPress’s get_template_part() function. For example, archive output uses post-list.php, which also loads pager.php, while the header, breadcrumb, mobile navigation, and page-top controls are separate parts. Template parts can receive arguments; news-list.php uses them for values such as posts per page, the NEW period, and CSS class.

Shortcode handlers can reuse the same parts by capturing their rendered output with output buffering. The breadcrumb, news_list, sns_links, and share shortcodes use this approach, so shortcode output follows the same markup as the corresponding theme feature. Keeping the markup in one template part avoids maintaining separate implementations for templates and shortcode output.

get_template_part('template-parts/breadcrumb');

SCSS Parts and Responsive Output

SCSS component styles are organized under assets/scss/parts. style-common.scss loads parts through @use “parts”; parts/_index.scss registers the shared modules with @forward. Parts that define common styles emit them by default, so shared component CSS is compiled into the common stylesheet. Their responsive mixins provide device-specific rules separately.

style-pc.scss and style-sp.scss load the relevant part modules, set component emit flags such as $emit-post-list-common, $emit-share-common, and $emit-sns-links-common to false, and include the desktop or mobile mixins. This keeps the common rules in style-common.scss while adding only PC- or SP-specific component rules to the corresponding stylesheet. The device stylesheets also include parts that provide device-specific mixins, such as the drawer button, header contact, and header logo.

@use "parts";
@use "parts/post-list" with ($emit-post-list-common: false);

@include post-list.post-list-desktop;

Available Parts

PHP Parts are grouped by their presentation role. Content and navigation templates include breadcrumb.php, news-list.php, page-header.php, pager.php, and post-list.php. Social output is handled by share.php and sns-links.php, while global interface templates include header/header-1.php, header/header-2.php, mobile-nav.php, and page-top.php. These templates may be reused by theme templates and shortcode output, but the PHP and SCSS Parts directories are not a one-to-one mapping.

SCSS Parts include direct styling for breadcrumb, news-list, page-header, pager, post-list, share, sns-links, and page-top. Other SCSS-only components support the surrounding interface, including drawer-button, header-contact, header-logo, overlay, search_form, sidebar, and table-of-contents. Shared-output Parts are registered through assets/scss/parts/_index.scss and loaded by style-common.scss. Mixin-only Parts are loaded directly by style-pc.scss or style-sp.scss, and responsive component differences remain in the component files. The parallax and scroll-animation Parts are paired with assets/js/parallax.js and assets/js/scroll-animation.js. Drawer, page-top, and table-of-contents interactions likewise use their corresponding scripts under assets/js/.

  • Content and navigation templates: breadcrumb.php, news-list.php, page-header.php, pager.php, and post-list.php.
  • Social output templates: share.php and sns-links.php.
  • Global UI templates: header/header-1.php, header/header-2.php, mobile-nav.php, and page-top.php.
  • Direct SCSS counterparts include breadcrumb, news-list, page-header, pager, post-list, share, sns-links, and page-top.
  • Supporting SCSS-only UI parts include drawer-button, header-contact, header-logo, overlay, search_form, sidebar, and table-of-contents.
  • Behavior utility parts include parallax and scroll-animation; their JavaScript is stored under assets/js/.

Part Examples

News List

The News List Part queries recent News posts. Use the shortcode in post or page content, or call the template Part from PHP when you need to pass the same options directly.

[news_list]

The posts_per_page and new_days attributes default to the values in News Settings (initially 5 posts and 7 days). The class attribute defaults to imb-news-list. The Part outputs nothing when no News posts are available.

get_template_part(
    'template-parts/news-list',
    null,
    [
        'posts_per_page' => 5,
        'new_days'       => 7,
        'class'          => 'imb-news-list',
    ]
);

Live Example

The SNS Links Part displays the profile URLs saved in Social Media Settings. Only services with a saved URL are output; if every URL is empty, the Part outputs nothing.

[sns_links]
get_template_part('template-parts/sns-links');

Live Example

x

Share

The Share Part creates links for sharing the current page URL and title. It displays only services enabled in Social Media Settings. The initial enabled services are X, Facebook, and LINE.

[share]
get_template_part('template-parts/share');

Live Example

X Line Linkedin Pinterest Reddit Whatsapp Telegram Bluesky

Use the Breadcrumb Part to output the context-aware breadcrumb trail. The breadcrumb displayed at the top of this page is the live example, so the shortcode is not executed again inside the article.

[breadcrumb]
get_template_part('template-parts/breadcrumb');

Context-dependent Parts

Page Header

Page Header outputs a page-level title area with an optional subtitle and background image. It is designed for the page layout rather than inline article content.

get_template_part(
    'template-parts/page-header',
    null,
    [
        'title'    => get_the_title(),
        'subtitle' => '',
        'image'    => '',
    ]
);

Post List and Pager

Post List renders the current archive query, and Pager depends on the current global query and its page count. Use them in listing templates, not as standalone article demos.

imb_post_list();

get_template_part('template-parts/pager');

Page Top and Mobile Navigation

Page Top is a fixed back-to-top control, while Mobile Navigation contains mobile controls selected by the current layout and menu settings. Both are already loaded from footer.php and depend on their JavaScript and responsive styles, so they should not be duplicated inside article content.

get_template_part('template-parts/mobile-nav');
get_template_part('template-parts/page-top');

Header 1 and Header 2

The active header is a page-wide layout selected in Site Settings. header.php resolves the configured layout and loads the matching Header Part; rendering it inside content would duplicate the site header.

$imb_header_layout = imb_get_header_layout();

get_template_part('template-parts/header/' . $imb_header_layout);

[site_logo] outputs the configured site logo. It accepts width, class, and alt attributes. Without a usable configured or fallback logo URL, it outputs nothing.

[site_logo width="180" class="footer-logo" alt="Company Logo"]

Organization and Local Business

[organization] and [local_business] return one allowed Business Information value selected with the key attribute. An empty, unsupported, or unset value produces no output.

[organization key="name"]
[local_business key="opening_hours"]

Table of Contents

[imb_toc] renders the theme Table of Contents when the current post type and post settings allow it. It has no shortcode attributes and may output nothing when the feature is disabled. It is not executed again here because this page already uses the Table of Contents feature.

[imb_toc]

Using Template Parts

Call an existing PHP template part with WordPress’s get_template_part() function. For example, get_template_part(‘template-parts/breadcrumb’) renders the breadcrumb part, while the theme also uses this function for header variants, mobile navigation, page-top output, post lists, and pagination.

When a part accepts arguments, pass them as the third argument to get_template_part(). IM Base’s news-list shortcode passes posts_per_page, new_days, and class to template-parts/news-list. The helper imb_get_template_part_shortcode_output() starts output buffering, renders the part with those arguments, and returns the captured HTML, allowing shortcode output to reuse the same template markup as theme templates.

return imb_get_template_part_shortcode_output(
    'template-parts/news-list',
    [
        'posts_per_page' => max(1, absint($atts['posts_per_page'])),
        'new_days'       => absint($atts['new_days']),
        'class'          => sanitize_html_class($atts['class'], 'imb-news-list'),
    ]
);

Customizing Parts

To change an existing Part’s markup, edit its reusable PHP template in template-parts. Update the corresponding component styles in assets/scss/parts rather than making standalone edits to generated CSS. Preserve the existing imb- class names unless a rename is required, and keep each Parts file focused on one component and responsibility.

Place shared component rules in the Part’s common styles, and put PC or SP differences in that same component file’s device-specific styles. Layout files are for page-level or region-level structure; responsive differences for shared Parts belong with the component. Register new Parts through assets/scss/parts/_index.scss and load shared Parts through style-common.scss when needed. After changing SCSS, compile and synchronize the generated files under assets/css/. Further details of the SCSS architecture should be documented separately.