【HABONE】テーマの独自ショートコード

【HABONE】テーマの独自ショートコード

WordPressのブロックエディタには、独自のブロックを作成して追加し、それをテーマの機能の一部として挿入できるようにしているものが数多くあります。

しかし簡単に挿入、調整ができる反面、そのテーマ独自の機能故に別のテーマへの移行時には、ブロックが壊れてしまい、正常化させるのに苦労することが多々あります。特に何かの制限を行うようなコンテンツでは、制限していたはずのものが表示されてしまうなど重大な問題となることがあります。それらを解消する作業を面倒にしてテーマからの離脱を防ぐ手段と考えるテーマも少なくないのではという印象を個人的には感じています。

そこで【HABONE】では、この問題を解消するため、組み込みブロックではなく、旧来のショートコードを使って、いくつかの独自機能を表示できるようにしています。ブロックのように融通が効かないところはありますが、WordPressサイトの維持をしていく上では大事なことと考えていますので、ぜひ使い方を覚えて活用ください。

文末の「各ショートコードを別のテーマで使用する方法」で、独自ショートコードを移行する方法を掲載していますので、ご自身のテーマや、将来【HABONE】から別のテーマへ移行された際の措置として参照ください。

【HABONE】独自ショートコード

QRコードの表示

パソコンでアクセスした人へモバイルでもご覧いただけるようにQRコードを表示するショートコードです。もちろんモバイル時には不要ですので非表示になります。

本文または本文内のウィジェットへ表示させる際のショートコード

以下のショートコードを本文内のショートコードブロック、段落ブロック、または、本文用ウィジェットエリアへ「カスタムHTML」を使って挿入すると表示されます。

[habone-qrcode]

サイドバーウィジェットへ表示させる際のショートコード

サイドバーウィジェットでは簡易表示させるため、以下の専用ショートコードを「カスタムHTML」へ挿入て使用します。

[habone-qrcode-side]

ログインユーザーのみにコンテンツを表示

以下のショートコードを使うことで、ログインしているユーザーだけに表示させるコンテンツを作ることができます。

[if-login]ログインユーザーだけに表示させる内容[/if-login]

開始ショートコードと終了ショートコードはショートコードブロックまたは段落ブロックへそれぞれ挿入します。

ショートコードの範囲にあるもの(単一または複数のブロック)がログインユーザーだけに表示されるようになります。

管理ユーザーのみにコンテンツを表示

以下のショートコードを使うことで、管理者権限を持つユーザーだけに表示させるコンテンツを作ることができます。投稿や固定ページ作成時の備忘録などを残しておくときに便利です。

[if-admin]ログインユーザーだけに表示させる内容[/if-admin]

使い方は、ログインユーザーのみに表示する場合と同じです。

パソコン表示時のみコンテンツを表示

以下のショートコードを使うことで、パソコンからアクセスした人だけに表示させるコンテンツを作ることができます。

[hab-pc]モバイルアクセス時に表示させるコンテンツ[/hab-pc]

使い方は、ログインユーザーのみに表示する場合と同じです。

パソコンかどうかの判断はWordPressの組み込み関数である「!wp_is_mobile」を使っていますので、デバイスによっては正常に動作しないことがあります。

モバイル表示時のみコンテンツを表示

以下のショートコードを使うことで、スマートフォン(モバイル)からアクセスした人だけに表示させるコンテンツを作ることができます。

[hab-mobile]モバイルアクセス時に表示させるコンテンツ[/hab-mobile]

使い方は、ログインユーザーのみに表示する場合と同じです。

モバイルかどうかの判断はWordPressの組み込み関数である「!wp_is_mobile」を使っていますので、デバイスによっては正常に動作しないことがあります。

各ショートコードを別のテーマで使用する方法

QRコードショートコードの機能追加方法

機能の追加

以下のコードをテーマのfunctions.phpへ追加します

/* [ha-qrcode]ショートコードでQRコードを示すコンテンツを表示(パソコン表示時のみ) */
// QRコード出力関数
if ( !function_exists( 'habone_get_qrcode_tag' ) ){
function habone_get_qrcode_tag($atts) {

	if(!wp_is_mobile()) {
	extract(shortcode_atts(array(
		'url' => get_permalink(),
		'size' => '150',
	), $atts));

$qrcode_title = __('This page can also be viewed on mobile devices','habone');
$qrcode_desctiption = __('If you scan the QR code on the left, the URL of this page will be displayed and you can easily access it. Please take a look at it on your mobile device.','habone');

	// イメージタグを返す
	return '
	<div class="qr-container">
	<ul class="qr-contents">
	<li><img class="qrc-image" src="https://chart.googleapis.com/chart?chs=' . $size . 'x' . $size . '&cht=qr&chl=' . $url . '&choe=UTF-8 " alt="QR Code" width="150px" height="150px"/></li>
	<li>
	<h3>'.$qrcode_title.'</h3>
	<p>'.$qrcode_desctiption.'</p>
	</li>
	</ul>
	</div>
	';
}
}
}
add_shortcode('habone-qrcode', 'habone_get_qrcode_tag');

/* [habone-qrcode-side]ショートコードでQRコードを示すコンテンツを表示(パソコン表示時のみ) */
// QRコード出力関数
if ( !function_exists( 'habone_get_qrcode_tag_side' ) ){
function habone_get_qrcode_tag_side($atts) {

	if(!wp_is_mobile()) {
	extract(shortcode_atts(array(
		'url' => get_permalink(),
		'size' => '100',
	), $atts));

$qrcode_desctiption = __('You can view this page on your mobile device from the QR code on the left.','habone');

	// イメージタグを返す
	return '
	<div class="qr-container-side">
	<ul class="qr-contents-side">
	<li><img class="qrc-image" src="https://chart.googleapis.com/chart?chs=' . $size . 'x' . $size . '&cht=qr&chl=' . $url . '&choe=UTF-8 " alt="QR Code" width="100px" height="100px"/></li>
	<li>
	<p>'.$qrcode_desctiption.'</p>
	</li>
	</ul>
	</div>
	';
}
}
}
add_shortcode('habone-qrcode-side', 'habone_get_qrcode_tag_side');

このままの状態で使用すれば、今まで挿入したQRコードはそのまま表示されます。ご自身のショートコード名にされる場合は上記コード中の「habone-qrcode」「habone-qrcode-side」を任意のものへ変更してください(その際には今まで挿入したショートコードも変更が必要です)。

表示される文字列は翻訳可能にするため、以下のようにしてあります

__('英語の文字列','habone');

「英語の文字列」の部分を日本語で入力すればそのまま日本語で表示できますし、「habone」の部分をお使いのテーマのテキストドメインへ変更して翻訳ファイルを再編集すれば、多言語での使用が可能です。

スタイルの追加

以下のコードをテーマのstyle.cssまたはテーマの追加CSSへ追加します

/*** QRコード(本文) ***/
ul.qr-contents {
    list-style: none;
    padding-left: 0;
    display: flex;
}

ul.qr-contents:after {
	display:block;	
}

.qr-container {
    border-radius: 8px;
    padding: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*** QRコード(サイドバー) ***/
.qr-container-side {
    border-radius: 4px;
    padding: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
}

ul.qr-contents-side {
    display: flex;
}

ul.qr-contents-side:after {
    display: block;
}

CSSのコードは、【HABONE】の場合のものです。テーマによっては正常に表示されないことがありますので、適宜調整を行ってください

ログインユーザーのみにコンテンツを表示 させるショートコードの機能追加方法

機能の追加

以下のコードをテーマのfunctions.phpへ追加します

/***** if-loginショートコードでログインユーザーのみにコンテンツを表示 ******/
if ( !function_exists( 'habone_if_login' ) ){
function habone_if_login( $atts, $content = null ) {
if(is_user_logged_in()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return ''  .$content. '';
} else {
return '';
}
}
}
add_shortcode('if-login', 'habone_if_login');

管理ユーザーのみにコンテンツを表示 させるショートコードの機能追加方法

機能の追加

以下のコードをテーマのfunctions.phpへ追加します

/***** if-adminショートコードで管理ユーザーのみにコンテンツを表示 ******/
if ( !function_exists( 'habone_admin_show' ) ){
function habone_admin_show( $atts, $content = null ) {
if(current_user_can( 'administrator' )) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
}
add_shortcode('if-admin', 'habone_admin_show');

パソコン表示時のみコンテンツを表示させるショートコードの機能追加方法

機能の追加

以下のコードをテーマのfunctions.phpへ追加します

/***** hab-pcショートコードでパソコン表示時のみコンテンツを表示 *****/
if ( !function_exists( 'habone_onlypc_show' ) ){
function habone_onlypc_show( $atts, $content = null ) {
if(!wp_is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
}
add_shortcode('hab-pc', 'habone_onlypc_show');

モバイル表示時のみコンテンツを表示させるショートコードの機能追加方法

機能の追加

以下のコードをテーマのfunctions.phpへ追加します

/***** hab-mobileショートコードでモバイル表示時のみにコンテンツを表示 *****/
if ( !function_exists( 'habone_onlymobile_show' ) ){
function habone_onlymobile_show( $atts, $content = null ) {
if(wp_is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
}
add_shortcode('hab-mobile', 'habone_onlymobile_show');

作者:

WordPress用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球