service プログラミング

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

この記事は約 9 分で読めます。

この記事では「有料版ACF Pro」を使用します
自分で作れない...代わりに作成して欲しい!と言う方は、記事の一番最後の「オリジナル吹き出し作成します!」に移動してください。

こんにちは、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の技術があればオリジナルのモノも作成できるので、是非作成してみてください!

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

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

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

よろしくお願いします。

-service, プログラミング

© 2021 AGATA CODE Powered by AFFINGER5