2017/10/10

【contact form7】サンキューページへのリダイレクト

これまで、on_sent_ok のフックを使用する方法で行っていましたが、この機能は2017年中に廃止される予定らしいので、以下は wpcf7mailsent イベント発生時に異なる URL にリダイレクトさせるスクリプトの例です。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 location = 'http://example.com/';
}, false );
</script>>

テーマのテンプレートファイルにこのコードを埋め込んで使います。

2017/06/24

【WordPress】管理画面にIP制限!

下記2か所に.htaccessを設置

/wp-admin

order deny,allow
deny from all
allow from 000.000.000.00 #許可するIPアドレス

 

wp-login.phpと同じディレクトリ

<Files "wp-login.php">
order deny,allow
deny from all
allow from 000.000.000.00 #許可するIPアドレス
</Files>
2017/03/29

【BigDumpでインポート】phpMyAdminでファイルが大きすぎてインポートできない時

サーバー移設などで、データベースをphpMyAdminでエクスポートして、新しいところにインポートする時に、サイズが大きくてインポートできない!ってたまにあります。
そんな時にBigDumpというPHPベースのMySQLインポートツールが便利です。

BigDumpとは

phpのフリーソフトで、サイズが大きくてインポートできないSQLファイルを分割してインポートしてくれます。

公式サイトから、ファイルをダウンロード
http://www.ozerov.de/bigdump/

 

bigdump(zip)
※2017年03月29日にダウンロードしたものです。

 

使い方

ダウンロードファイル(bigdump.php)をエディタで開き、データベースに接続するための以下の情報を編集します。

38~41行目付近。

$db_server   = '';    //サーバ名
$db_name     = '';    //DB名
$db_username = '';    //ユーザ名
$db_password = '';    //パスワード

※この時、phpmyadminでDBとユーザーの追加をしておかないといけませんでした。

 

サーバ上に任意のディレクトリを作成し、作成ディレクトリ以下にbigdump.phpsqlファイルをアップロード

例えば…

“bigdump”という名前のフォルダを作成。
http://(ドメイン)/bigdump/bigdump.php
http://(ドメイン)/bigdump/hogehoge.sql

こんな感じ。

http://(ドメイン)/bigdump/bigdump.phpにアクセス

設定が正しければ、アップロードしたダンプファイルが一覧に表示されているはずです。対象ファイルを見ると、”Start Import into ‘DB名’ at ‘サーバ名'”と書いてあるので、Start Importをクリック。
これだけでインポートされます。

 

途中までインポートされて、エラーが出た時

エクスポートするときに、「作成するクエリの最大長」を50000→1000に変更したら、自分は成功しました。

 

最後に、サーバ上にアップロードした、bigdump.phpsqlファイルを削除して終了です。

 

 

2017/03/25

スクロールすると、上部にグローバルナビゲーションを固定する。

html

<div id="navi">
    <ul class="clearfix">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

 

CSS

※好きなように編集してください。

#navi {
 width: 100%;
 height: auto;
 float: left;
 padding-right: 20px;
 padding-left: 20px;
 padding-bottom: 20px;
 padding-top: 20px;
 box-sizing: border-box;
 background-color: #000000;
}
.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
}

#navi ul{
 width: 100%;
 height: auto;
 float: left;
}

#navi li{
 width: auto;
 height: auto;
 float: left;
 padding-right: 20px;
 padding-left: 20px;
}

#navi li a{
 color: #FFFFFF;
}

 

JS

<script>
 $(function() {
 var nav = $('#navi');
 //表示位置
 var navTop = nav.offset().top+200;
 //ナビゲーションの高さ
 var navHeight = nav.height()+10;
 var showFlag = false;
 nav.css('top', -navHeight+'px');
 //ナビゲーションの位置まできたら表示
 $(window).scroll(function () {
 var winTop = $(this).scrollTop();
 if (winTop >= navTop) {
 if (showFlag == false) {
 showFlag = true;
 nav
 .addClass('fixed')
 .stop().animate({'top' : '0px'}, 200);
 }
 } else if (winTop <= navTop) {
 if (showFlag) {
 showFlag = false;
 nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
 nav.removeClass('fixed');
 });
 }
 }
 });
 });
 </script>
2017/03/25

下にスクロールして一定のところで、「TOPに戻る」ボタンを表示させる

html

<div id="pagetop"><a href="#up">▲</a></div>

 

CSS

※好きなように変更してください

#pagetop {
 width: 100px;
 height: auto;
 float: left;
 position: fixed;
 bottom: 20px;
 right: 20px;
}
#pagetop a {
 width: 100%;
 height: auto;
 float: left;
 background: #555555;
 color: #FFFFFF;
 padding: 30px;
 text-align: center;
 border-radius: 5px;
 box-sizing: border-box;
}
#pagetop a:hover {
 background: #999999;
}

 

JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

フェードイン・フェードアウト

<script>
$(function() {
 var topBtn = $('#pagetop'); 
 topBtn.hide();
 //スクロールが100に達したらボタン表示
 $(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 topBtn.fadeIn();
 } else {
 topBtn.fadeOut();
 }
 });
 //スクロールしてトップ
 topBtn.click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 500);
 return false;
 });
});
</script>

スライドして下から出現

<script>
$(function() {
 var showFlag = false;
 var topBtn = $('#pagetop'); 
 topBtn.css('bottom', '-100px');
 var showFlag = false;
 //スクロールが100に達したらボタン表示
 $(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 if (showFlag == false) {
 showFlag = true;
 topBtn.stop().animate({'bottom' : '20px'}, 200); 
 }
 } else {
 if (showFlag) {
 showFlag = false;
 topBtn.stop().animate({'bottom' : '-100px'}, 200); 
 }
 }
 });
 //スクロールしてトップ
 topBtn.click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 500);
 return false;
 });
});
</script>

 

2017/02/03

Google『日本語検索の品質向上にむけて』

検索結果のより上位に自ページを表示させることに主眼を置く、品質の低いサイトの順位が下がります。その結果、オリジナルで有用なコンテンツを持つ高品質なサイトが、より上位に表示されるようになります。

https://webmaster-ja.googleblog.com/2017/02/for-better-japanese-search-quality.html?m=1

品質の基準がわかるといいのですが…。

2017/01/31

WordPress|ギャラリーのCSSをカスタマイズ

まず、元からある、ギャラリー用CSSを使わない設定をします。

 

function.php

//本体ギャラリーCSS停止
add_filter( 'use_default_gallery_style', '__return_false' );

 

CSS

/*-----------------------------
ギャラリー
------------------------------*/
.gallery {
}
.gallery-item {
 float: left;
 margin-top: 0;
 margin-bottom: 20px;
 margin-left: 0;
}
.gallery-icon {
 text-align: center;
}
.gallery-caption {
 color: #21759B;
 font-size: 90%;
 margin: 0;
 text-align: center;
}
.gallery-item img{
 width: 100%;
 padding: 0%;
 margin: 0%;
 float: left;
 height: auto;
}
.gallery-columns-1 .gallery-item {
 width: 100%;
 margin: 0%;
 box-sizing: border-box;
 float: left;
 height: auto;
}
.gallery-columns-2 .gallery-item {
 width: 48%;
 margin: 1%;
 float: left;
 height: auto;
}
.gallery-columns-3 .gallery-item {
 width: 32%;
 margin-left: 1%;
 float: left;
 height: auto;
}
.gallery-columns-4 .gallery-item {
 width: 23%;
 margin: 1%;
 float: left;
 height: auto;
}

 

2017/01/31

CSSで タグのリンクを無効化

a {
pointer-events: none;
}

autoで有効に。