編集画面改善プラグイン

編集画面を便利に操作する

ブログ（ジャーナル）としても、また備忘録としても活用頻度が多くなってくると、操作感に不満を覚える段階となることがあると思います。現状の FlatPress においては、入力（編集）画面で保存をしようとすると、その保存ボタンが画面下に隠れていることがよくあります。まずは、このボタンの位置を調整するか、あるいは別途追加して便利に操作したく考えるようになりました。

そこでプラグインの習熟を兼ねて制作することにしました。早速、効果が確認できる画面からお見せいたします。この効果の特徴は二つで、一つは保存ボタン系が押しやすい位置に追加されています。もう一つは、「題名」と「内容」という分かりきった項目名の表示を消して編集画面をすっきりとさせるとともに、保存ボタンのスペースを確保しています。

もともとの状況は皆さんもよくご存じなことですが、これを再掲してからプラグイン設定を説明します。

このデフォルトの編集画面から「表題」と「内容」の項目名を消す具体的な方法は後段で説明しておきます。なお、ここでのデフォルトとは、http://wiki.flatpress.org/res:plugins#bbcod:plugins#bbcod より、http://wiki.flatpress.org/_media/res:plugins:stanley:bbcode-v-1.6.2a-unofficial.zip をダウンロードして、インストールしたものを指しています。

プラグインの設定方法

通常のプラグインのインストールを行いますが、本プラグインの ON/OFF 設定もできるようにしてあります。

プラグイン動作の有効設定

下図のように、[BBcodeAdv]をクリックして表示される設定画面で動作のON/OFF が切り替えられます。頻繁に切り替えることもないので、ボタンなどで設定するのではなく、単純に"ON"か"OFF"を入力する方法となっています。

プラグインの具体的な説明

各プログラムの配置は本プラグインをダウンロードして確認していただくとして、plugin_btn()は、設定値保存ファイル（fp-content/config/settings.conf.php）のフラグが"ON"ならば保存ボタンの表示テンプレートを適用し、同時に css も吐き出し（指定）ています。で、この適用場所は、add_filter('editor_toolbar', 'plugin_btn');で指名しています。

class admin_plugin_bbcodeAdv extends AdminPanelAction ｛部分はお決まりの設定値保存ルーチンとなっています。（plugin_bbcodeAdvを plugin.bbcode-Advとハイフンを入れる指定はできない＝エラーとなるのは、どこかで解説が見つかるでしょうかね）

<?php
/*
Plugin Name:  BBCode ADV
Version: 0.5
Plugin URI: http://flatpress.info/
Description:  BBCode Advance
Author: Flatpress.info
Author URI: http://flatpress.info
*/

/*
function plugin_bbcodeAdv($content) {
    return $content;
}
add_action('the_content', 'plugin_bbcodeAdv');
*/

function plugin_btn(){
    global $fp_config;
   if ($fp_config['plugins']['bbcodeAdv']['shape'] == "ON") {
        global $smarty;
        $smarty->display(ABS_PATH . 'fp-plugins/bbcodeAdv/tpls/btn.tpl');
        $h = plugin_geturl('bbcodeAdv') . 'res/css/btn.css';
        echo '<link rel="stylesheet" type="text/css" href="' . $h . "\" />\n";
   }
}
add_filter('editor_toolbar', 'plugin_btn');

if (class_exists('AdminPanelAction')) {
        class admin_plugin_bbcodeAdv extends AdminPanelAction {
                function setup() {
                        $this->smarty->assign('admin_resource', "plugin:bbcodeAdv/admin.plugin.bbcodeAdv");
                        $ba_config = plugin_getoptions('bbcodeAdv');
                        if(!$ba_config['shape']) {
                                $shape = "OFF";
                                plugin_addoption('bbcodeAdv', 'shape', $shape);
                                plugin_saveoptions('bbcodeAdv');
                        }
                }
                function main() {
                        $ba_config = plugin_getoptions('bbcodeAdv');
                        $this->smarty->assign('ba_config', $ba_config);
                }
                function onsubmit() {
                        if ($_POST['ba-shape']){
                                $shape = $_POST['ba-shape'];
                                plugin_addoption('bbcodeAdv', 'shape', $shape);
                                plugin_saveoptions('bbcodeAdv');
                                $this->smarty->assign('success', 1);
                        } else {
                                $this->smarty->assign('success', -1);
                        }
                        return 2;
                }
        }
        admin_addpanelaction('plugin', 'bbcodeAdv', true);
}
?>

ボタン三つを表示させるテンプレートは元テンプレートからコピーしただけのものになってます。

tpls/btn.tpl

<div class="buttonbar2">
{html_submit name="save" id="save" value=$panelstrings.submit accesskey=s}
{html_submit name="savecontinue" id="savecontinue" value=$panelstrings.savecontinue accesskey=c}
{html_submit name="preview" id="preview" value=$panelstrings.preview accesskey=p}
</div>

このテンプレートはプラグイン設定で使用されるものです。これも前例（bijinclock)と大差ないです。

tpls/admin.plugin.bbcodeAdv.tpl
<h2>{$plang.head}</h2>
{include file=shared:errorlist.tpl}
{html_form class=option-set}
<div class="option-list">
<p>{$plang.discription|wptexturize}</p>
<p>
        <textarea id="ba-shape" name="ba-shape" rows="1" cols="20">{$ba_config.shape}</textarea>
</p>
</div>
<div class="buttonbar">
        <input type="submit" value="{$plang.submit}"/>
</div>
{/html_form}

{$plang.shape}

これは増やしたボタン専用のスタイルファイルで、お好みで調整ください。

res/css/btn.css

.buttonbar2 {
        position:relative;
        top: 0px;
        left: 0px;
        float: right;
        margin: 7px 0 5px 0;
}

#admin-editor label {
        display: none;
}

言語ファイルとして、説明文や設定値名、結果表示などを記述しておきます。日本語に変えておいても問題ないですね。（例：'Save' -> '保存')

lang/lang.ja-jp.php

<?php

$lang['admin']['plugin']['bbcodeAdv'] = array(
        'discription' => 'BBCode Advance',
        'shape' => '
                Normal: OFF<br>
                Advanced: ON<br>',
        'submit' => 'Save',
        'msgs' => array(
                1 => 'successful saved.',
                -1 => 'not saved.'
        )
);

$lang['plugin']['bbcodeAdv'] = array(
        'subject'       => 'BBCode ADV',
        );

?>

最後になりましたが、このプラグインのダウンロードはここ(bbcodeAdv.zip)からできます。なお、もう少し便利に使えるような変更も加えていきたいので、このプラグインは引き続きアップデートが予定されていいます。

補足メモ

このプラグインを有効にしただけでは fp-content/config/settings.conf.php に設定値の書き込みは起こらない。動作上は無視された形で問題は生じない。
プラグイン設定[BBcodeADV]をクリックすると setup() によって初期値(OFF)が書き込まれる。別設定値を再保存でき、保存確認ルーチンが走る。
プラグインの削除を行っても、fp-content/config/settings.conf.php に書き込まれたパラメータは削除されない。（削除ルーチンがない）

FlatPress.info

Information & blog