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

  • 公開日：2021年9月19日

カテゴリー:【HABONE】の機能

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

このページの最終更新日は2021年12月14日です。情報が古い場合がありますのでご注意ください。

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]

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

パソコンかどうかの判断はユーザー定義関数「!is_mobile」を使っていますので、デバイスによっては正常に動作しないことがあります（is_mobile関数についてはこちら）。

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

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

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

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

パソコンかどうかの判断はユーザー定義関数「!is_mobile」を使っていますので、デバイスによっては正常に動作しないことがあります（is_mobile関数についてはこちら）。

シェアボタンを任意の場所へ表示

テーマカスタマイザーの設定で表示できる場所以外の任意の場所へシェアボタンを表示させるショートコードです。

表示させたい位置に以下のショートコードを挿入します。

[hab-share-button]

カスタマイザー設定で表示するシェアボタンとデザインは同じ（共通）になります

更新日表示ショートコード

ショートコードを挿入することで、投稿本文内の任意の場所へ最終更新日（更新日がない場合は公開日）を表示させることができます。

[habone-mdate]

ページ上部へ戻る▲

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

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');

シェアボタンをショートコードで呼び出す機能の追加方法

パソコン上で以下のコードを入れた「sharebutton.php」というファイルを作り、テーマフォルダへアップロードします

<?php if(is_single() || is_page()){
	$url_encode=urlencode(get_permalink());
	$title_encode=urlencode(get_the_title().'｜'.get_bloginfo('name'));
} else{
	$url_encode=urlencode(home_url('/'));
	$title_encode=urlencode(get_bloginfo('name'));	
}
?>
<div class="share">
	<ul>
	<!--Facebookボタン-->
		<li class="facebook">
		<a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
		<span class="icon-facebook2"></span><span> facebook</span>
		</a>
		</li>
	<!--ツイートボタン-->
		<li class="tweet">
		<a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ;?>&text=<?php echo $title_encode ;?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
			<span class="icon-Twitter_Social_Icon_Rounded_Square_White"></span><span>  tweet</span>
			</a>
		</li>
	<!--はてなボタン-->
		<li class="hatena">
			<a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><span class="icon-hatenabookmark"></span><span> Hatena</span>
		</a>
		</li>
	<!--LINEボタン-->
		<li class="line-sns">
		<a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="icon-line-square"></span><span> LINE</span>
		</a>
		</li>
	<!--ポケットボタン-->
		<li class="pocket">
			<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="icon-pocket"></span><span> Pocket</span>
		</a>
		</li>
		</ul>
</div>

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

function habone_share_button_shortcode(){
	ob_start();
	$share_content = get_template_part('sharebutton');
	$html = ob_get_contents();
	ob_end_clean();
	
	return $html;
}
add_shortcode('hab-share-button', 'habone_share_button_shortcode');

テーマの追加CSSへ以下のデザインコードを追加します

パソコン用

/* シェアボタン */
.share ul {
	display: flex;
	list-style: none;
	gap: 8px;
	justify-content: center;
	padding-left: 0;
	align-items: center;
	text-align: center;
}

.share ul:after{
	display:block;
}

.share li {
	width: 20%;
	padding: 8px;
	height: 20px;
}

.share li a {
	width: 100%;
	height: 100%;
}

.share a {
	color: #fff!important;
	text-decoration:none;
}

.share a:hover {
	opacity: 0.7;
}

li.tweet{
	background: #00acee;
	box-shadow: 0 5px 0 #0092ca;
}

li.facebook{
	background: #3b5998;
	box-shadow: 0 5px 0 #2c4373;
}

li.hatena{
	background: #5d8ac1;
	box-shadow: 0 5px 0 #43638b;
}

li.line-sns{
	background: #25af00;
	box-shadow: 0 5px 0 #219900;
}

li.pocket{
	background: #f03e51;
	box-shadow: 0 5px 0 #c0392b;
}

モバイル用

/* シェアボタン */
.share {
	max-width: 100%;
	text-align: center;
	letter-spacing: 0.1em;
	font-size: 1.1em;
	margin-top: 20px;
	margin-bottom: 20px;
}

.share ul {
	list-style: none;
	padding-left: 0;
}

.share li {
	padding: 16px;
	margin: 16px;
}

.share li a {
	width: 100%;
	height: 100%;
}

.share a {
	color: #fff!important;
	text-decoration:none;
}

li.tweet{
	background: #00acee;
	box-shadow: 0 5px 0 #0092ca;
}

li.facebook{
	background: #3b5998;
	box-shadow: 0 5px 0 #2c4373;
}

li.hatena{
	background: #5d8ac1;
	box-shadow: 0 5px 0 #43638b;
}

li.line-sns{
	background: #25af00;
	box-shadow: 0 5px 0 #219900;
}

li.pocket{
	background: #f03e51;
	box-shadow: 0 5px 0 #c0392b;
}

上記CSSは【HABONE】テーマでのものですので、他のテーマでは調整が必要です

【HABONE】ではCSSをパソコン／モバイルで完全独立させていますので、上記モバイル用のコードはメディアクエリなどを使って調整する必要があります。

更新日表示ショートコード機能の追加方法

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

/***** [habone-mdate]で最終更新日を表示 *****/
function habone_published_modified_date_shortcode() {
	$date = get_the_date( 'U' );
	$updated = get_the_modified_date( 'U' );

	$output = '<span>' . get_the_date() . '</span>';
	if( $updated > ( $date + WEEK_IN_SECONDS ) )
		$output = ' <span>' . get_the_modified_date() . '</span>';

	return $output;
}
add_shortcode( 'habone-mdate', 'habone_published_modified_date_shortcode' );

ページ上部へ戻る▲

WordPressオリジナルテーマ制作入門
著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 （2025/10/25 16:31時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
1冊ですべて身につくWordPress入門講座
著:Mana
¥2,200 （2025/10/25 16:31時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
アバター画像

作者:

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

年齢：50代 趣味／園芸・ペット・卓球