FlatPress.info

Information & blog

ページをフェードインするプラグインの作成

デザインの観点から、記事内容のページが"ふわっと"表示されてくる作り方をしているサイトが見受けられます。これを実現するプラグインを作りましたので紹介します。以下にダウンロードから設置までを説明しておきます。

 

  1. プラグイン名が fadein というもので、fadein.zip を本サイトのここからダウンロードして fp-plugins の配下に解凍します。
  2. 例にならって、このプラグインを有効化します。
  3. 有効後は記事内容の表示全体がフェードインして表示されるようになります。

flatpress-fadein

 

 

プラグインの内容は次の通りです。"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としておきましょう。また、ログインとログアウトするシーケンスでは遅延しないようにしています。
以下がプラグインの有効化のスクリーンショットとなります。

fadein-enable

FlatPess 記事

Copyright c  flatpress.info 2015. All Rights Reserved.