ページをフェードインするプラグインの作成
デザインの観点から、記事内容のページが"ふわっと"表示されてくる作り方をしているサイトが見受けられます。これを実現するプラグインを作りましたので紹介します。以下にダウンロードから設置までを説明しておきます。
- プラグイン名が fadein というもので、fadein.zip を本サイトのここからダウンロードして fp-plugins の配下に解凍します。
- 例にならって、このプラグインを有効化します。
- 有効後は記事内容の表示全体がフェードインして表示されるようになります。
プラグインの内容は次の通りです。"slow"という部分を任意の値にすれば、希望するフェードイン時間が設定できます。（このあたりの情報はネットで検索ください）
plugin.fadein.php
<?php
/*
Plugin Name: fadeIn
Plugin URI: http://www.flatpress.info/
Description: Adds Fadein to FlatPress
Author: Faltpress.info
Version: 0.9
Author URI: http://www.flatpress.info/
*/
function plugin_fadein_dispnone() {
$fflag1 = strstr($_SERVER['REQUEST_URI'], 'login.php?do=login');
$fflag2 = strstr($_SERVER['REQUEST_URI'], 'login.php?do=logout');
if($fflag1 || $fflag2) {
echo '<script type=text/javascript>$(\'head\').append( \'<style type="text/css">body {display:block;}\' );</script>';
} else {
echo '<script type=text/javascript>$(\'head\').append( \'<style type="text/css">body {display:none;}\' );</script>';
}
}
function plugin_fadein_fadein() {
echo '<script type=text/javascript src=' . PLUGINS_DIR . 'fadein/jquery/res/jquery-2.1.3.min.js></script>';
echo '<script type=text/javascript>$(document).ready(function() { $(\'body\').fadeIn("slow"); });</script>';
}
add_action('wp_footer', 'plugin_fadein_fadein');
add_action('wp_head', 'plugin_fadein_dispnone');
?>
気になるところがひとつあって、本来は<body>タグの部分においてフェードインの javascript を起動すべきだと思うのですが、その部分へのadd_action の登録方法が不明でしたので、現状のようになっています。取り敢えず動作しているのでOKとしておきましょう。また、ログインとログアウトするシーケンスでは遅延しないようにしています。以下がプラグインの有効化のスクリーンショットとなります。
