WordPressには「リビジョン」という、元の状態に復元できる機能が実装されています。
編集に失敗して、いざというときに復元したいい場合役に立つときがあります。
編集前の状態に戻すには、投稿ページにあるメニューの公開にあるリビジョンを選択、
そこで、戻したいバージョンの記事を選択するだけです。
デメリットとしては、
リビジョン管理をするとデータが増大してしまうことです。
リビジョンの管理に制限がなくどんどん作成されてしまうので、データを圧迫してしまう可能性があります。
データを圧迫したくないという方は、
リビジョンを無効にすくことも可能です。
無効にするには、
wp-config.phpに記述してあげればOKです。
define(WP_POST_REVISION, false);
保存するリビジョン数を制限したい場合は以下を記述します。
define(WP_POST_REVISION, 保存するリビジョン数);
mw wpformで条件分岐フォームでありながら、それぞれのフォームにバリデーションを付与する方法です。
以下では選んだラジオボタンによって、
切り替えるフォームを作成する方法です。
funnction.phpに以下の記述をします。
/* mw wp form validate */
function my_validation_rule( $Validation, $data ) {
if ( $data['投稿'] === '画像' ) {
$Validation->set_rule( '画像', 'noEmpty', array(
'message' => '画像が添付されていません'
) );
}
if ( $data['投稿'] === 'テキスト' ) {
$Validation->set_rule( 'テキスト', 'noEmpty', array(
'message' => 'テキストをご記入下さい。'
) );
}
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-1582', 'my_validation_rule', 10, 2 );
$data[‘投稿’] にあたる部分がラジオボタンのname属性にあたる部分です。
あとはset_ruleにバリデートを付与したいフォームエリアのname属性を指定してあげればOKです。
■ 投稿をを選択 [mwform_radio name="投稿" children="画像,テキスト] ■画像を添付してください [mwform_file name="画像"] ■テキストを記入してください [mwform_text name="テキスト"] ■送信ボタン [mwform_submitButton name="mwform_submitButton-982" confirm_value="確認画面へ" submit_value="送信する"]
あとはスクリプトでname=”投稿”のvalの値によって表示非表示の条件分岐をしてあげれば、
選んだ選択肢によって表示非表示を切り替えられるマルチフォームを作成することができます。
サイトリニューアルで新しくテーマを作成したけれども、現在のサイトテーマを維持したまま、
公開前までに裏側で作業したいなんて場面があります。
そんな時には管理者のみが適用したテーマを閲覧することができるテーマが存在します。
もちろん 、スマホなどの実機でも閲覧が可能です。
インストールが完了したら、設定画面のtestthemeからテーマを選択しcurrentstateでonを選択するだけです。
ちなみに、見せる管理者権限はrolesから選択することができます。
コーディングでposition関連のプロパティを使う機会はとても多いと思います。
今回ではIEでchromeなどのブラウザとちがっいぇレイアウトが崩れる現象に遭遇したのでメモです。
二倍で書き出した画像に対して、画像に対してzoomを指定し半分のサイズで表示させていましたが、
ブラウザ上では画像は半分サイズで表示されているにもかかわらず、親要素に対して、
指定している位置がおかしいという現象がありました。
contents .inner{
position:relative;
}
.contents{
position:absolute;
bottom:0;
left:0;
}
.contents img{
zoom:0.5;
}
上記のように指定してしまうと、画面上は正常な画像サイズに見えていても、実際は2倍サイズとして扱われてしまっているため
positionの位置が崩れていたということです。
表示とコードの差異がわかりずらく、解決に時間がかかってしまったので、zoomなど、問題のありそうなプロパティなどに注意して、
コーディングを行っていきたいですね。
サイト制作においてSVGを使用する機会が多く増えてきました。
アニメーションも非常に軽快で使用しやすいものなので、効果的に使用すれば、サイトのデザインを魅力的に見せることが可能です。
そこでSVGアニメーションを使用で便利なサイトを紹介します。
https://maxwellito.github.io/vivus-instant/
SVG画像を、ドラッグ&ドロップでアップロードして、左側のメニューでアニメーションの設定をするだけで簡単に調整が可能です。
メニュー項目のAnimation typeでアニメーションのタイプや、描く順番、時間や、ループの設定が可能です。
項目の設定し、SVGファイルをダウンロードしたら
CSSで動かす設定をしてあげれば、OKです。
path{
fill:#333;
stroke:#333;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
stroke-width: 1;
-webkit-animation: stroke 4s ease-in 0s;
animation: stroke 4s ease-in 0s;
}
@-webkit-keyframes stroke {
0% {
stroke-dashoffset: 2000;
fill:transparent;
}
40% {
stroke-dashoffset: 2000;
fill:transparent;
}
50% {
fill:transparent;
}
100% {
stroke-dashoffset: 0;
fill:#0060e6;
}
}
文字をアウトライン化したデータや複数の線画をアニメーションさせたいけれども、設定が難しいなんて方も使用してみてはどうでしょうか。
CSS3のアニメーションなどで、要素が見えた瞬間にアニメーションさせたいという場面があったので、
備忘録的なメモです。
ブラウザ上で見えたときに処理を実行するには、
要素までのスクロール量を収得してイベントを発火させるか,
プラグインで、イベントさせるかがあります。
プラグインを使用する場合
ダウンロードしたquery.inview.jsをhead内で読み込み、
.on(‘inview’, function(){});でイベントの記述をします。
■js
$('.animation').on('inview', function() {
$(this).addClass("active");
});
■css
@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
.animation.active {
animation-name: fadeIn;
}
上記のように記述することで、見えたときにアニメーションのフェードインをさせることができます。
単にjsで実行する場合下記のように記述すればOKです。
$(function() {
var active = $(".animation");
$(window).scroll(function(){
var Position = $(active).offset().top - $(window).height();
if ($(window).scrollTop() > Position) {
$(this).addClass("active");
}
});
});
WordPressには条件分岐タグが存在します。
このタグを使用することで、デバイスによって表示の変更が可能です。
それが、wp_is_mobileという条件分岐タグです。
スマホからのアクセスされているかどうかを判定し、表示の切り替えが可能です。
// スマホで表示させる内容 // PCで表示させる内容
PCとスマホで別々の広告を表示させるときや、
PCとスマホでメニューの表示の仕方を変えたい場合に有効です。
メディアクエリーと似たように表示の切り替えが可能ですが、wp_is_mobile()では、端末によって判別するところが大きく違うところです。
注意点として、タブレットもスマホ扱いになってしまうため、スマホ以外はPC表示にしたいい場合は、
function.phpに以下の記述をして、is_mobile()で条件分岐をしてあげます。
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
// スマホで表示させる内容
// スマホ以外でで表示させる内容
会社概要のテーブルなど、
table, tbody, tr, th, td {
display: block;
}
display: block;をしてしてあげることで縦並びになります。
ですが、iOSの実機で表示されたときにSafariではtdが横並びのままで表示されることがあります。
iosのSafariはWebkitです。
WebkitはDOCTYPE宣言をしなければ、tdのdisplay:block;をtable-cellで上書きしてしますため、
立て並びになりません。
DOCTYPE宣言で
を指定してあげることで解決できます。
ユーザーの削除の方法を紹介します。
WordPressで作成したサイトの管理者権限など、クライアントに譲渡する場合や、
自分の書いていたブログをほかの人に譲渡したい場合です。
管理画面にログインした後、メニューの中の「ユーザー」メニューの
「ユーザー一覧」メニューをクリックします。
表示された「ユーザー」画面の削除したいユーザーにマウスカーソルを合わせると、「削除」というボタンがありますので、
それを押すと、「ユーザーの削除」画面が表示されます。
１．「すべてのコンテンツを消去します。」
２．「すべてのコンテンツを以下のユーザーのものにする」
上記の二つを選択できるので、削除するのか、違うユーザーに引き継いでもらうのか選択してください。
選択が終われば、削除を押して完了です。
WpのCrazy Boneのプラグインをインストールしていれば、
いだれがログインアクセスしたのかを判別することが可能です。
ログイン履歴をチェックすると、時々、
不正アクセスの履歴が残っていたりすることがあります。
主な不正アクセスはロシアやアメリカ、ウクライナなどが多くあります。
不正アクセスを発見した場合、
特定のIPアドレスをブロックできる「WP-Ban」というプラグインを入れるとよいでしょう。
使い方は簡単で、特定のIPアドレスなどの場合は、
プラグインをWordPressにインストールして、ブロックしたいIPアドレスを入力するだけです。
同じ国で、複数のIPアドレスから攻撃を受けている場合,
設定のBanned Host Namesに
中国ならcn
ロシアならrnと入力して登録すればOKです。
日本のサイトなど海外からの閲覧など特にないような場合などは、国ごと登録してしまうのも一つの手かもしれません。
不正ログインをされないようにWPのログインIDやパスワードなど簡単なものにしないように気を付けていきたいですね。