「ブログに効果大」WordPress でオリジナル吹き出しを作ろう！

こんにちは、Masayukiです。

みなさん、ネットの記事やブログでこんなようなものを見たことはありませんか？

ここ数年、人は長い文章よりも、短文や、会話形式の方を好みます。

また、書店に行けば「漫画で分かる！」のような本も増えてきました。

このように、つらつら文章を書くよりも、イラストや会話を使った方が多くの人に読んでもらうことが出来ます！

なので、上の写真のような「吹き出し」は絶大な効果があります。

今回は、その「吹き出し」をオリジナルで作成していこうと思います。

作成方法

function.php　の変更

まずはfunction.php にコードを追加していきます。

以下のコードをfunction.phpにどこでもいいので追記してください。

add_action('acf/init', 'left_talk'); //1
function left_talk()
{
	if (function_exists('acf_register_block')) {

		// 著者情報のブロックを追加
		acf_register_block(array(
			'name'        => 'yourname',//2
			'title'        => __('左吹き出し'), //3
			'description'    => __('著者の詳細を記載します'),
			'render_callback'  => 'left_comment', //4
			'category'      => 'formatting',
			'icon'        => 'admin-comments', 
			'keywords'      => array('左吹き出し', 'left'),
		));
	}
}

function left_comment($block)//5
{
	get_template_part("left-comment");//6
}

それでは順に解説していきます。

1.add_action('acf/init', 'left_talk');

これでこの中の left_talk() 関数を呼び出します。

2.'name' => 'yourname',

作成者の名前を書いてください。

3.'title' => __('左吹き出し'),

ここで決めたタイトルがブロックの名前となります。（見出し、リスト、画像のような）

4.'render_callback' => 'left_comment',

これで「left_comment」関数が呼び出せます。

5.function left_comment($block)

呼び出し先のファイルで$blockが使えるようになります

6.get_template_part("left-comment");

「left-comment.php」 のファイルを呼び出します。

表示ページの作成（left-comment.php）

上で呼び出したleft-comment.phpを作成していきます。

<?php

$icon = get_field('icon');


$id = 'author' . $block['id'];

$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>

<blockquote id="<?php echo $id; ?>" class="author <?php echo $align_class; ?>">
  <div class="left_talk">
    <img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" />
    <div class="left_comment">
      <p><?php the_field('comment'); ?></p>
    </div>
  </div>
</blockquote>

<style>
  .left_talk{
	margin:30px 20px 0;
	display: flex;
	align-items: center;
}


.left_comment {
  position: relative;
  display: inline-block;
  margin: 0 0 0 25px;
  padding: 7px 10px;
  width: 50%;
  color: #555;
  font-size: 16px;
	background: #e0edff;
}

.left_comment:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}

.left_comment p {
  margin: 0;
  padding: 0;
}

.left_talk img{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}
</style>

1.HTMLの部分を<blockquote>で囲います。

あとは基本的にACFの使い方と同様です。

$icon = get_field('icon');　でiconに指定した画像が、

<?php the_field('comment'); ?>　でcomment に指定した文字が表示できます。

ACFの設定

それでは、ACF に新たなカスタムフィールドを作成していきましょう。

アイコンとコメントを作成します。

重要なのは「ルール」の部分で「ブロック」を指定することです。

では投稿画面を見てみましょう。

「フォーマット」の部分に追加されていると思います！

右吹き出しのコード

function.php です。

add_action('acf/init', 'right_talk');
function right_talk()
{
	if (function_exists('acf_register_block')) {
		acf_register_block(array(
			'name'        => 'right', 
			'title'        => __('右吹き出し'), 
			'description'    => __('著者情報'), 
			'render_callback'  => 'right_comment', 
			'category'      => 'formatting', 
			'icon'        => 'admin-comments', 
			'keywords'      => array('右吹き出し', 'right'), 
		));
	}
}

function right_comment($block)
{ 
	get_template_part("right-comment"); 
}

right-comment.php です

<?php

$icon = get_field('icon');
$id = 'author' . $block['id'];
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>

<blockquote id="<?php echo $id; ?>" class="author <?php echo $align_class; ?>">
  <div class="right_talk">
    <div class="right_comment">
      <p><?php the_field('comment'); ?></p>
    </div>
    <img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" />
  </div>
</blockquote>

<style>
  .right_talk{
	margin:30px 20px 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}


.right_comment {
  position: relative;
  display: inline-block;
  margin: 0 25px 0 0;
  padding: 7px 10px;
  width: 50%;
  color: #555;
  font-size: 16px;
	background: #e0edff;
}

.right_comment:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e0edff;
}

.right_comment p {
  margin: 0;
  padding: 0;
}

.right_talk img{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}
</style>

---

HTMLとCSSの技術があればオリジナルのモノも作成できるので、是非作成してみてください！

オリジナル吹き出し作成します！

作るのが難しい...でもブログや会社の集客に吹き出しを使いたい！代わりに作って欲しい！というかたは、上のお問い合わせフォームにて連絡をください。

期間限定で無料で作成します。（需要が増えたら有料にします。）

よろしくお願いします。