477 views

やりたいこと

ブログ執筆時、記事の内容がスクロールしても、固定位置で表示しておきたいパーツがある。
これを shortcode で実現したい。

やってみた

(1) プログラム・ソースコード

とりあえずのたたき台だ。
後々、装飾のためのオプションを追加して行こう。

現在のオプションは以下の通り。

<?php
/*
Plugin Name: ZTopFix Shortcode
Description: [ztopfix] ショートコードブロックで常時最上位に表示する。
Version: 1.0
Author: DOGROW.NET
*/
function ztopfix_shortcode($atts, $content = null) {
    // デフォルト値
    $atts = shortcode_atts([
        'h' => 'L',
        'v' => 'T',
        'x' => '2rem',
        'y' => '2rem'
    ], $atts, 'ztopfix');
    // 水平方向スタイル
    $horizontal_style = '';
    $x = $atts['x'];
    if (strtoupper($atts['h']) === 'L') {
        $horizontal_style = 'left:'.$x.';';
    }
    elseif (strtoupper($atts['h']) === 'R') {
        $horizontal_style = 'right:'.$x.';';
    }
    // 垂直方向スタイル
    $vertical_style = '';
    $y = $atts['y'];
    if (strtoupper($atts['v']) === 'T') {
        $vertical_style = 'top:'.$y.';';
    } elseif (strtoupper($atts['v']) === 'B') {
        $vertical_style = 'bottom:'.$y.';';
    }
    // スタイル全体
    $style = 'position: fixed; z-index: 9999;background-color:#fff;padding:1rem;border:0.3rem #000 solid;border-radius:0.5rem;box-shadow:2px 2px 2px rgba(0,0,0,0.5);'.$horizontal_style.$vertical_style;
    return '<div style="'.esc_attr($style).'">' . do_shortcode($content) . '</div>';
}
add_shortcode('ztopfix', 'ztopfix_shortcode');

(2) 使い方

今回作った Shortcode [ztopfix] を実際に使ってみる。
ページ左下に表示されているものは、こうやって表示している。

[ztopfix h="L" v="B" x="10rem" y="10rem"]
<h2 style="color:red">常に表示しておきたいものをココに書いておく。</h2>
[/ztopfix]