月別アーカイブ: 2013年7月

WordPress ビジュアルエディタをカスタマイズ TinyMCE Advanced

ここではビジュアルエディタのカスタマイズするプラグインTinyMCE Advancedを紹介しています。

tinymce

ダウンロードはこちら
http://wordpress.org/plugins/tinymce-advanced/

プラグイン→新規追加→TinyMCE Advancedでインストールできます。

設定画面からドラッグ&ドロップで好きな機能を付け足すだけで分かりやすいかと思います。

テキストでSyntaxHighlighter Evolvedを使ってソースコードを書かれる方は、
エディタのテキスト→ビジュアルと切り替えるとソースコードが上手く表示されないので注意が必要です。

WordPress リビジョン(記事の下書き,自動保存)を無効にする

ここではWordPressでリビジョン(記事の下書き)を無効にする方法を紹介しています。

wordpress_logo

概観→テーマ編集では編集できないのでサバーからwp-config.phpを落として編集する必要があります。
wp-config.phpはWordPressをインストールした場所(ドキュメントルート)にあります。

/wp-config.php

    define('WP_POST_REVISIONS', false);

こちらのソースを追記します。

追記場所

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
    define('ABSPATH', dirname(__FILE__) . '/');
    define('WP_POST_REVISIONS', false);
    /** Sets up WordPress vars and included files. */
    require_once(ABSPATH . 'wp-settings.php');

これで自動保存される下書きは無効に設定できます。
パフォーマンスも変わるので設定しておきたいところです。
下書き保存をしたい場合、公開タブの下書きとして保存を使ってください。

jQuery マウスオーバーで画像にキャプションを表示 mosaic

ここではマウスオーバーで画像にキャプションを表示するプラグインmosaicを紹介しています。

mosaic

ダウンロードはこちら
http://buildinternet.com/project/mosaic/

デモはこちら
https://office-goto.info/demo/mosaic/

読み込むファイル

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

Circleの場合の読み込み
css

<style type="text/css">
    .mosaic-block {
    	float:left;
    	position:relative;
    	overflow:hidden;
    	width:400px;
    	height:250px;
    	margin:10px;
    	background:#111 url(img/progress.gif) no-repeat center center;
    	border:1px solid #fff;
    	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    }
    .mosaic-backdrop {
    	display:none;
    	position:absolute;
    	top:0;
    	height:100%;
    	width:100%;
    	background:#111;
    }
    
    .mosaic-overlay {
    	display:none;
    	z-index:5;
    	position:absolute;
    	width:100%;
    	height:100%;
    	background:#111;
    }
    .circle .mosaic-overlay {
    	background:url(img/hover-magnify.png) no-repeat center center;
    	opacity:0;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    	filter:alpha(opacity=00);
    	display:none;
    }
</style>

js

<script type="text/javascript">
    $(function(){
        $('.circle').mosaic({
    		opacity : 0.8  // オーバーレイ用不透明 (0-1)
    	});
    });
</script>

html

<!--Circle-->
<div class="mosaic-block circle">
    <a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay">&nbsp;</a>
    <div class="mosaic-backdrop"><img src="img/mosaic.jpg"/></div>
</div>

他にFade、Bar、Bar2、Bar3、Cover、Cover2、Cover3があるので必要な箇所を読み込んでください。

CakePHP2.x Controller::disableCache

ここではCakePHP2.xでController::disableCacheの使い方を紹介しています。

Cookbook2.xより引用
Controller::disableCache();
ユーザーの使っている ブラウザ に対して、現在のリクエストをキャッシュしないように伝えるために使われます。

登録画面→確認画面→登録完了画面(登録完了処理)とするときSessionでフラグを立ててブラウザの戻るボタンを回避する必要がなくなります。
Controller::disableCache();を使うことによってブラウザのキャッシュを消してくれます。

Controller内に記述

<?php     
    
    function beforeFilter(){
         $this->disableCache();
    }

こうすることでブラウザの戻るボタンを回避することができます。

HTML アドレスなど再確認用に

ここではお問い合わせでメールアドレスなど再確認するときの右クリック禁止、オートコンプリートを出さない、コピペ禁止、半角のtextフィールドを設置する方法を解説しています。

<input type="text" oncopy="return false" onpaste="return false" oncontextmenu="return false" autocomplete="off" style="ime-mode:disabled"/>

oncopy=”return false”
コピーをできないように設定

onpaste=”return false”
ペーストをできないように設定

oncontextmenu=”return false”
右クリックをできないように設定

autocomplete=”off”
オートコンプリートが出ないように設定

style=”ime-mode:disabled”
半角英数のみしか打ち込めないように設定

これでJavascriptやPHPでエラーチェックの項目が大分減ります。