WordPressプラグイン作成～実際に表示させる部分を作る～
前々回の続きです！
データベースに設定情報を送ることができるようになったので、
いざ、その情報を実際に表に表示させていきます。
「dashicons-list-view.php」にショートコードを追加していきます。
「class Dashicons_List_View {}」内の下の方に実際に表示したい内容を書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
public function short_code_init() { $sns = get_option( $this->text_domain ); $html = ''; if ( $sns ){ $html .= '<ul>'; if ( isset( $sns['twitter_display'] ) && $sns['twitter_display'] === 'on' ) { $html .= '<li>'; $html .= '<a href="https://twitter.com/' . $sns['twitter_account'] . ' target="_blank">'; $html .= '<span class="dashicons dashicons-twitter footer-icon" style="color:' . $sns['twitter_color'] . '"></span>'; $html .= '<span style="color:' . $sns['twitter_color'] . '">' . $sns['twitter_account'] . '</span>'; $html .= '</a>'; $html .= '</li>'; } if ( isset( $sns['facebook_display'] ) && $sns['facebook_display'] === 'on' ) { $html .= '<li>'; $html .= '<a href="https://www.facebook.com/' . $sns['facebook_account'] . ' target="_blank">'; $html .= '<span class="dashicons dashicons-facebook footer-icon" style="color:' . $sns['facebook_color'] . '"></span>'; $html .= '<span style="color:' . $sns['facebook_color'] . '">' . $sns['facebook_account'] . '</span>'; $html .= '</a>'; $html .= '</li>'; } if ( isset( $sns['instagram_display'] ) && $sns['instagram_display'] === 'on' ) { $html .= '<li>'; $html .= '<a href="https://www.instagram.com/' . $sns['instagram_account'] . ' target="_blank">'; $html .= '<span class="dashicons dashicons-instagram footer-icon" style="color:' . $sns['instagram_color'] . '"></span>'; $html .= '<span style="color:' . $sns['instagram_color'] . '">' . $sns['instagram_account'] . '</span>'; $html .= '</a>'; $html .= '</li>'; } if ( isset( $sns['pinterest_display'] ) && $sns['pinterest_display'] === 'on' ) { $html .= '<li>'; $html .= '<a href="https://www.pinterest.jp/' . $sns['pinterest_account'] . ' target="_blank">'; $html .= '<span class="dashicons dashicons-pinterest footer-icon" style="color:' . $sns['pinterest_color'] . '"></span>'; $html .= '<span style="color:' . $sns['pinterest_color'] . '">' . $sns['pinterest_account'] . '</span>'; $html .= '</a>'; $html .= '</li>'; } if ( isset( $sns['youtube_display'] ) && $sns['youtube_display'] === 'on' ) { $html .= '<li>'; $html .= '<a href="https://www.youtube.com/' . $sns['youtube_account'] . ' target="_blank">'; $html .= '<span class="dashicons dashicons-youtube footer-icon" style="color:' . $sns['youtube_color'] . '"></span>'; $html .= '<span style="color:' . $sns['youtube_color'] . '">' . $sns['youtube_account'] . '</span>'; $html .= '</a>'; $html .= '</li>'; } $html .= '</ul>'; } return $html; } |
内容について説明していきます。
まず、get_option関数で、データベースからデータを取得してます。
|
1 |
$sns = get_option( $this->text_domain ); |
次に、if文で、値が入っている時だけ表示するようにしています。
それぞれの値が表示されるかどうかは、各アイコンごとに設置した表示するかどうかのチェックボックスに
チェックが入っているかどうかで出し分けもしています。
|
1 2 3 4 5 6 |
if ( $sns ){ //←$snsに値が入っているかどうか $html .= '<ul>'; if ( isset( $sns['twitter_display'] ) && $sns['twitter_display'] === 'on' ) { //←値が入っていて、かつ、設置したチェックボックスに値がはいっている事 } } |
それぞれのアイコンを表示させてる部分についてですが、
書くアイコンのHTML自体はそんなに難しい事は書いてなくて、
リンクと、色、アカウント名の部分をデータベースから取得したもので表示しています。
|
1 2 3 4 5 6 |
$html .= '<li>'; $html .= '<a href="https://twitter.com/' . $sns['twitter_account'] . ' target="_blank">'; $html .= '<span class="dashicons dashicons-twitter footer-icon" style="color:' . $sns['twitter_color'] . '"></span>'; $html .= '<span style="color:' . $sns['twitter_color'] . '">' . $sns['twitter_account'] . '</span>'; $html .= '</a>'; $html .= '</li>'; |
$sns[‘twitter_account’] ⇒アカウント名で入力したものが入ります。
$sns[‘twitter_color’] ⇒管理画面で選択して登録した色になるようにスタイルで指定しています。
（そしてここの説明を書きながら、管理画面上でサイズ指定できるような見た目にしてるのに表示に反映させるのを忘れてる事に気づきました…！(笑)）
このファイル内に書いただけでは、もちろん表に表示させる部分を記述してないので、
まだ表示はできません。
なので、表に記述できるようにするため、まずは、上記で作成した関数を動かすために、
public function __construct () {} 内に追記します。(ハイライト部分)
|
1 2 3 4 5 6 |
public function __construct () { $data = get_file_data( __FILE__, array( 'version' => 'Version', 'text_domain' => 'Text Domain' ) ); $this->text_domain = isset( $data['text_domain'] ) ? $data['text_domain'] : ''; add_action( 'admin_menu', array( $this, 'admin_menu' ) ); add_shortcode( $this->text_domain, array( $this, 'short_code_init' ) ); } |
そして、表示させるページへ実際に表示させるための記述をしていきます。
私はフッター部分に表示したいので、footer.phpに下記内容を追記しました。
|
1 2 3 4 5 |
<?php if ( shortcode_exists( 'dashicons-list-view' ) ) { echo do_shortcode( '[dashicons-list-view]' ); } ?> |
これでいったん画面には表示されます！！
CSSはそれぞれの表示箇所等によって調整してもらうっていう感じになります。
また大きさの調整部分も修正していきたいと思います。。。！
