【WordPress】ボタン作成からショートコード追加まで  横並び2つ

こんにちは、にわこまです。

今回は、ボタンの作成からWordPressへのショートコード追加までを紹介します。作成するボタンは、横並び2つのボタンです。使用するイメージとしては、「前のページ」「次のページ」のためのボタンです。

誤字脱字や何かございましたらご連絡お願い致します。

 

 

スポンサードサーチ


WordPress ボタン

WordPressのボタンのプラグインといえば、「MaxButtons」が有名ですが、今回は自作していきます。さらに、自作したボタンをショートコードに登録して使いたい時に呼び出せるようにします。

実行環境&言語
・Windows 10
・Apache
・HTML,CSS,PHP

 

作成手順

1.ボタンのデザインを作成

2.1のデザインをPHPの関数に組み込む

3.Apacheで動作確認

4.WordPressのショートコードに追加

5.WordPressで動作確認

 

 

ボタンのデザインを作成

テキストエディタを開き、「Apache24\htdocs」に「wp_btn.php」と「wp_btn.css」というファイルを作成し、以下のコードを書きます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>WordPress Button</title>
    <link rel="stylesheet" href="wp_btn.css">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div class="main-container">
      <div class="btn-design-block">
        <a href="#" class="btn-design btn-left">Previous</a>
        <a href="#" class="btn-design btn-right">Next</a>
      </div>

    </div>

  </body>
</html>
@charset "UTF-8";

@media (min-width: 1024px){
  .main-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}
.main-container {
  background-color: #EFEFEF;
}

/* button design */
.btn-design-block {
  display: flex;
  justify-content: space-between;
}
.btn-design {
  padding: 0.5em 1em;
  text-decoration: none;
  background-color: #668AD8;
  color: #FFFFFF;
  width: 50%;
  text-align: center;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-design:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.btn-design-block .btn-left {
  /* margin: top right bottom left */
  margin: 0.5em 0.25em 0.5em 0.5em;
}
.btn-design-block .btn-left::before {
  content: "\3C";
  margin-right: 0.5em;
}
.btn-design-block .btn-right {
  margin: 0.5em 0.5em 0.5em 0.25em;
}
.btn-design-block .btn-right::after {
  content: "\3E";
  margin-left: 0.5em;
}

 

次にデザインを確認します。コマンドプロンプトを開いて「Apache24\bin」まで移動します。私の場合はC直下に置いてあるため「C:\Apach24\bin」まで移動します。移動したら以下のコマンドを実行してサーバを起動させます。

C:\Apache24\bin>httpd

 

次にブラウザを起動して、「http://localhost:8081/wp_design.php」を入力します。以下のようにページの真ん中にボタンが配置されていれば問題ありません。

 

さらに、いろいろな画面サイズで確認を行います。「右クリック」→「検証(I)」をクリックします。

以下のようなページが表示されます。

 

ページ上部にあるバーをクリックして、いろんなデバイスの横幅でデザインが崩れないか確認します。

・パソコンの横幅↓

・タブレットの横幅(iPadなど)↓

・スマートフォンの横幅(375px)

・スマートフォンの横幅(320px)

 

確認が完了したら、サーバを止めます。
コマンドプロンプトで「Ctr + C」を入力すると止ります。

 

 

スポンサードサーチ


デザインをPHPの関数に組み込む

先ほど作ったデザインをPHPの関数に組み込みます。PHPの関数を呼び出すだけでボタンを作成できるようにします。wp_btn.phpの1番上と「main-container」の間にコードを書き加えます。

<?php

function btn_row_two($textleft, $urlleft, $textright, $urlright){
  $html = '<div class="btn-design-block">
            <a href="'.$urlleft.'" class="btn-design btn-left">'.$textleft.'</a>
            <a href="'.$urlright.'" class="btn-design btn-right">'.$textright.'</a>
           </div>';
  echo $html;
}

?>

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>WordPress Button</title>
    <link rel="stylesheet" href="wp_btn.css">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div class="main-container">
      <?php btn_row_two("Left", "#", "Right", "#"); ?>

    </div>

  </body>
</html>

 

 

Apacheで動作確認を行います。

コマンドプロンプトを開き「Apache24\bin」に移動します。私の場合はC直下に置いてあるため、「C:\Apache24\bin」に移動します。移動したら以下のコマンドを入力し、サーバを起動させます。

C:\Apache24\bin>httpd

 

サーバを起動させたら、ブラウザを開き「http://localhost:8081/wp_btn.php」へアクセスします。以下のようなページが表示されていれば、確認は完了です。

 

修正

このままであると、「Left」や「Right」のようなテキストを入力し忘れてしまったり、URLを入力し忘れたりすることがあるかもしれません。入力し忘れたまま、ページに表示してしまっては大変なことになります。また、「左側だけ」や「右側だけ」にボタンを表示したい場合もあると思います。

そのため、PHPの関数(btn_row_tow)に条件分岐を追加し、上記の場合に対処します。また、エラー用などの装飾をCSSに書き加えます。

<?php

function btn_row_two($textleft, $urlleft, $textright, $urlright){
  $html_left = '';
  $html_right = '';
  if( strlen($textleft) != 0 or strlen($urlleft) != 0 or strlen($textright) != 0 or strlen($urlright) != 0 ){
    // 条件分岐 左
    if( strlen($textleft) != 0 and strlen($urlleft) != 0 ){
      $html_left = '<a href="'.$urlleft.'" class="btn-design btn-left">'.$textleft.'</a>';
    }
    elseif ( strlen($textleft) == 0 and strlen($urlleft) == 0 ) {
      $html_left = '<a href="#" class="btn-design btn-left btn-none">None</a>';
    }
    elseif ( strlen($textleft) != 0 and strlen($urlleft) == 0 ) {
      $msg_error = 'Error:01';  // ※左側のボタンのURLが指定されていません。
      $html_left = '<a href="#" class="btn-design-error btn-left">'.$msg_error.'</a>';
    }
    elseif ( strlen($textleft) == 0 and strlen($urlleft) != 0 ) {
      $msg_error = 'Error:02';  // ※左側のボタンのTEXTが指定されていません。
      $html_left = '<a href="#" class="btn-design-error btn-left">'.$msg_error.'</a>';
    }
    else {
      $msg_error = 'Error:03';  // ※予期していない条件分岐が発生しました。
      $html_left = '<a href="#" class="btn-design-error btn-left">'.$msg_error.'</a>';
    }
    // 条件分岐 右
    if ( strlen($textright) != 0 and strlen($urlright) != 0 ) {
      $html_right = '<a href="'.$urlright.'" class="btn-design btn-right">'.$textright.'</a>';
    }
    elseif ( strlen($textright) == 0 and strlen($urlright) == 0 ) {
      $html_right = '<a href="#" class="btn-design btn-right btn-none">None</a>';
    }
    elseif ( strlen($textright) != 0 and strlen($urlright) == 0 ) {
      $msg_error = 'Error:04';  // ※右側のボタンのURLが指定されていません。
      $html_right = '<a href="#" class="btn-design-error btn-right">'.$msg_error.'</a>';
    }
    elseif ( strlen($textright) == 0 and strlen($urlright) != 0 ) {
      $msg_error = 'Error:05';  // ※右側のボタンのTEXTが指定されていません。
      $html_right = '<a href="#" class="btn-design-error btn-right">'.$msg_error.'</a>';
    }
    else {
      $msg_error = 'Error:06';  // ※予期していない条件分岐が発生しました。
      $html_left = '<a href="#" class="btn-design-error btn-right">'.$msg_error.'</a>';
    }
    $html = '<div class="btn-design-block">'
            .$html_left
            .$html_right
            .'</div>';
    echo $html;
  }
  else {
    $html = '<div class="btn-design-block">
              <a herf="#" class="btn-design-error btn-left">Error:07</a>
              <a href="#" class="btn-design-error btn-right">Error:07</a>
             </div>';
    echo $html;
  }
}

?>
//
//省略
//
<div class="main-container">
    <?php btn_row_two("Left", "#", "Right", "#"); ?>
    <?php btn_row_two("Left", "",  "Right", "#"); ?>
    <?php btn_row_two("",     "#", "Right", "#"); ?>
    <?php btn_row_two("",     "",  "Right", "#"); ?>
    <?php btn_row_two("Left", "#", "Right", "");  ?>
    <?php btn_row_two("Left", "#", "",      "#"); ?>
    <?php btn_row_two("Left", "#", "",      ""); ?>
    <?php btn_row_two("",     "",  "",      "");  ?>

 </div>
//
//以下省略
//
.btn-design-error {
  padding: 0.5em 1em;
  text-decoration: none;
  background-color: #DC143C;
  color: #FFFFFF;
  width: 50%;
  text-align: center;
  border-bottom: solid 4px #991024;
  border-radius: 3px;
}
.btn-design-error:active{
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.btn-design-block .btn-none {
  background-color: #EFEFEF;
  color: #EFEFEF;
  border-bottom: none;
  pointer-events: none;
}

 

ブラウザで表示しているページをリロードして確認します。以下のように表示されていれば問題ありません。

注意
CSSファイルの「.btn-design-block .btn-none」において「background-color」と「color」を#EFEFEFに設定していますが、この色は背景色と同じ色にしてください。 背景色と同じ色にすることによって、あたかも「左側だけ」または「右側だけ」にボタンがあるように見せています。

 

エラーコード

Error:01 → 左側のボタンのURLが指定されていない。
Error:02 → 左側のボタンのTEXTが指定されていない。
Error:03 → 左側において予期しないエラーが発生。
Error:04 → 右側のボタンのURLが指定されていない。
Error:05 → 右側のボタンのTEXTが指定されていない。
Error:06 → 右側において予期しないエラーが発生。
Error:07 → 両側のボタンにおいて何も指定されていない。

「Error:03」と「Error:06」に関しては、ほとんど発生しないと考えてよいです。

 

以上でApacheでの動作確認は終了です。

 

 

スポンサードサーチ


WordPressのショートコードに追加

WordPressにログインして、「外観」→「テーマエディター」を選択します。

 

右側のテーマファイルから「Theme Functions(functions.php)」をクリックします。

 

ファイルが表示されたら、「functions.php」ファイルの一番下まで移動します。そして、PHPの関数をWordPress用に少し書き換えて、書き込みます。

// wp-btn
function btn_row_two($atts){
	extract(shortcode_atts(array(
		'textleft' => $atts[0],
        'urlleft' => $atts[1],
        'textright' => $atts[2],
		'urlright' => $atts[3]
	), $atts));
	$html_left = '';
	$html_right = '';
	if( strlen($textleft) != 0 or strlen($urlleft) != 0 or strlen($textright) != 0 or strlen($urlright) != 0 ){
		// 条件分岐 左
		if( strlen($textleft) != 0 and strlen($urlleft) != 0 ){
			$html_left = '<a href="'.$urlleft.'" class="btn-design btn-left">'.$textleft.'</a>';
		}
		elseif ( strlen($textleft) == 0 and strlen($urlleft) == 0 ) {
			$html_left = '<a href="#" class="btn-design btn-left btn-none">None</a>';
		}
		elseif ( strlen($textleft) != 0 and strlen($urlleft) == 0 ) {
			$msg_error = 'Error:01';  // ※左側のボタンのURLが指定されていません。
			$html_left = '<a href="#" class="btn-design-error btn-left">'.$msg_error.'</a>';
		}
		elseif ( strlen($textleft) == 0 and strlen($urlleft) != 0 ) {
			$msg_error = 'Error:02';  // ※左側のボタンのTEXTが指定されていません。
			$html_left = '<a href="#" class="btn-design-error btn-left">'.$msg_error.'</a>';
		}
		else {
			$msg_error = 'Error:03';  // ※予期していない条件分岐が発生しました。
			$html_left = '<a href="#" class="btn-design-error btn-left">'.$msg_error.'</a>';
		}
		// 条件分岐 右
		if ( strlen($textright) != 0 and strlen($urlright) != 0 ) {
			$html_right = '<a href="'.$urlright.'" class="btn-design btn-right">'.$textright.'</a>';
		}
		elseif ( strlen($textright) == 0 and strlen($urlright) == 0 ) {
			$html_right = '<a href="#" class="btn-design btn-right btn-none">None</a>';
		}
		elseif ( strlen($textright) != 0 and strlen($urlright) == 0 ) {
			$msg_error = 'Error:04';  // ※右側のボタンのURLが指定されていません。
			$html_right = '<a href="#" class="btn-design-error btn-right">'.$msg_error.'</a>';
		}
		elseif ( strlen($textright) == 0 and strlen($urlright) != 0 ) {
			$msg_error = 'Error:05';  // ※右側のボタンのTEXTが指定されていません。
			$html_right = '<a href="#" class="btn-design-error btn-right">'.$msg_error.'</a>';
		}
		else {
			$msg_error = 'Error:06';  // ※予期していない条件分岐が発生しました。
			$html_left = '<a href="#" class="btn-design-error btn-right">'.$msg_error.'</a>';
		}
		$html = '<div class="btn-design-block">'
			     .$html_left
            	 .$html_right
            	 .'</div>';
	}
	else {
		$html = '<div class="btn-design-block">
  	              <a herf="#" class="btn-design-error btn-left">Error:07</a>
                  <a href="#" class="btn-design-error btn-right">Error:07</a>
                 </div>';
	}
	return $html;
}
add_shortcode('mybtn', 'btn_row_two');

 

次に装飾のCSSファイルを書き加えていきます。右側のテーマファイルから「Stylesheet(style.css)」を選択します。ファイルが開かれたら一番下まで移動します。必要な部分だけを書き込みます。

/* button design */
.btn-design-block {
  display: flex;
  justify-content: space-between;
}
.btn-design {
  padding: 0.5em 1em;
  text-decoration: none;
  background-color: #668AD8;
  color: #FFFFFF;
  width: 50%;
  text-align: center;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-design:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.btn-design-block .btn-left {
  /* margin: top right bottom left */
  margin: 0.5em 0.25em 0.5em 0.5em;
}
.btn-design-block .btn-left::before {
  content: "\3C";
  margin-right: 0.5em;
}
.btn-design-block .btn-right {
  margin: 0.5em 0.5em 0.5em 0.25em;
}
.btn-design-block .btn-right::after {
  content: "\3E";
  margin-left: 0.5em;
}
.btn-design-error {
  padding: 0.5em 1em;
  text-decoration: none;
  background-color: #DC143C;
  color: #FFFFFF;
  width: 50%;
  text-align: center;
  border-bottom: solid 4px #991024;
  border-radius: 3px;
}
.btn-design-error:active{
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.btn-design-block .btn-none {
  background-color: #EFEFEF;
  color: #EFEFEF;
  border-bottom: none;
  pointer-events: none;
}

 

以上でWordPressのショートコードに追加することが出来ました。

 

 

WordPressで動作確認

ショートコードが正しく使えるか、動作確認を行います。「固定ページ」→「新規追加」を選択します。適当にタイトルを入力して保存します。

 

ブロックの追加」→「ウィジット」→「ショートコード」を選択します。

 

ショートコードの欄に以下のように入力し、保存します。

 

右上のプレビューをクリックし、以下のように表示されていれば動作確認完了です。

 

 

スポンサードサーチ


まとめ

今回は、ボタンの作成からWordPressのショートコードへ追加するまでを紹介しました。PHPであれば他にもショートコードを加えることができます。

良く使う文やコードがあればショートコードに追加して、効率化を計りましょう!

しかし、functions.phpやstyle.cssを編集するため扱いには気を付けましょう。エラーが発生する可能性があります。必ずバックアップをとってから行ってください。

 

最後までお読みいただきありがとうございます。


スポンサードサーチ