にょるんと追加内容が出てくるスクリプト

にょるんにょるん。

        <div id="whatsnew">
            <h2>更新履歴</h2>
            <a href="#" id="viewAll">全て見る</a>
            <dl>
                <dt> 2013.08.13 </dt>
                <dd> 更新内容更新内容</dd>
            </dl>
            <div id="whatsnewAll">
                <dl>
                    <dt> 2013.08.12 </dt>
                    <dd> 更新内容更新内容</dd>
                </dl>
            </div>
        </div>
	$(function($){
		$("#whatsnewAll").hide();
		$("#viewAll").click(function () {
			$(this).toggleClass('selected')
			$("#whatsnewAll").slideToggle("slow");
			if($(this).hasClass('selected')){
				$(this).text('閉じる');
				return false
			}else{
				$(this).text('全て見る');
				return false
			}
		});
	});

ワードプレスをいじる時のコツ

ワードプレスをいじる時のコツを教えてもらったのでメモメモ。

テーマファイルの読み込み順を参照する

Template_Hierarchy

テーマファイルの読み込み順がわかると、いろいろ便利です。
実は「カスタムタクソノミー」「タグ」「カテゴリ」は内部的には同じ挙動です。

phpをいじる時はphpのエラーを出すようにしておく

.htaccessに以下を記述してるものとしてないもの、二種類用意して切り替えましょう!

php_flag  display_errors On

phpエラーの種類はコチラを見ましょう。
http://liginc.co.jp/programmer/archives/4107

変更はfunction.phpの中で処理

テーマとかプラグインとかいじってしまうと、アップデートした時に変更が消し飛んでしまいますので。。。
function.phpは、テーマ編集→テーマのための関数 (functions.php)にあります。

プラグインを改造した時は??

ダッシュボードに以下の方法でメッセージを表示させてあげてください。

<?php
/* ダッシュボードにメッセージを表示 */
//ライターさんへのお知らせ
function dashboard_widget_1() {
    echo '
ここにライターさんへのお知らせを入れることができます。
';
}
//現在募集中のテーマ
function dashboard_widget_2() {
    echo '
ここに現在募集中のテーマを書く
';
}

function add_dashboard_widgets() {
global $wp_meta_boxes;
//ダッシュボードに表示しない項目を選択
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);//被リンク
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);//現在の状況
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);//プラグイン
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);//最近のコメント
  //unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);//クイック投稿
  //unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);//最近の下書き
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);//WordPress開発ブログ
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);//WordPressフォーラム

 wp_add_dashboard_widget('dashboard_widget_1', 'ライターさんへのお知らせ', 'dashboard_widget_1');
wp_add_dashboard_widget('dashboard_widget_2', '現在募集中のテーマ', 'dashboard_widget_2');
}
add_action('wp_dashboard_setup', 'add_dashboard_widgets' );
?>

facebookページでスクロールバーを消すには

ヘッダーに
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
  appId: '508723992516876', //アプリID
  status: true,
  cookie: true,
  xfbml: true
});
 
window.fbAsyncInit = function() {
  FB.Canvas.setAutoGrow();
}
function sizeChangeCallback() {
  FB.Canvas.setAutoGrow();
}
</script>

</body>の直前に
<script>
 FB.Canvas.setAutoGrow({ width: 810, height: 2300 });
</script>

cssもだいじ。

html,body{
	height:auto;
}

html {
	overflow-y : hidden;
	overflow-x : hidden;
}

IEでも画像をlabelタグでクリックしたい

普通はjquery.syg_imageradioとか使えばいいのですが、
画像をクリックしたいっていう特殊な事例の場合。

$(function () {
//IE Label img
        if ($.browser.msie) {
                $('label').click(function () {
                        $('#' + $(this).attr('for')).focus().click();
                });
        }
});

label img {
        cursor:pointer;
}

参考サイト
http://depthcode.com/2010/08/ie-label-img.html

WPのアップロードファイルサイズ上限を上げる

■Step1
info.phpを作る。中身はこれ。

<?php
phpinfo();
?>

■Step2
info.phpにブラウザからアクセスして、これを検索。
user_ini.filename
ここの項目に書かれているファイル名の通りのphp.iniを作る。

■Step3
php.iniを作ってアップ。中身はこれ。適宜変更するといい。

memory_limit = 50M
post_max_size = 40M
upload_max_filesize = 30M;
max_input_time = 60

jQueryでTwitter用文字数カウント

Twitter投稿用文字数カウント。

//初期状態
var textCount = $('#voteTextarea').val().length;
var endsCount = 140 - textCount;
$('#endsCount').text(endsCount);
$('#voteAllWrap').fadeIn('slow');

//こっちの記述でもいいけど
$('#voteTextarea').on('keyup',function(){
	var textCount = $('#voteTextarea').val().length;
	var endsCount = 140 - textCount;
	$('#endsCount').text(endsCount);
});

遅延動作をさせたいなら以下のプラグインを入れて、スクリプトを書き換える。
200のとこは、遅延させたいミリ秒を入れる。
http://benalman.com/projects/jquery-throttle-debounce-plugin/

//こっちだとなおいい
$('#voteTextarea').on('keyup', $.debounce(200, function(){
	var textCount = $('#voteTextarea').val().length;
	var endsCount = 140 - textCount;
	$('#endsCount').text(endsCount);
 }));

参考記事はこちら
http://ktkne.st/elab/post/2012/strcount-throttle-debounce.html

追記。
URLの文字数は短縮されるので、
予め投稿する文字数がわかってる場合は
var endsCount = 140 – textCount;
あたりの文字数を変更するといい。
例えば30文字のURLを投稿したい場合は22文字に短縮されるから、
var endsCount = 148 – textCount;
の扱いにすればいい。

フォームに装飾を加えたい時のいろいろ

フォームの装飾はブラウザに依存するので、
フォームの見た目に装飾を加えたい時は、一旦リセットする必要がある場合がある。

-webkit-appearance:none;
-moz-appearance:none;
appearance: none;

タップした時の挙動も変更できる。ハイライトカラーを非表示!

a {
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}

参考サイト
http://blog.webcreativepark.net/2011/06/09-201210.html

HTMLのhttps対応

■内部に読み込むファイル
httpsから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。

<link rel="
src="

■外部へのリンク
httpから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。

<meta property="og:url"
<meta property="og:image"
href="

ヘッダーがfixされてるページのページ内アンカー

例えばちょうどいい位置が画面上端から100pxだったらこうする。
多分、パディングの上端がアンカーの位置として計算されているんだろうな。
それだと見た目が正しくならないから、マージントップで調整する、と。

.sample{
padding-top:100px;
margin-top:-100px;
}

参考
http://depthcode.com/2011/02/header-fixed.html