パラメータをGETで取得しCSSを切り替える英語/日本語スイッチ php

PHP

$langswitch =htmlspecialchars($_GET["lang"], ENT_QUOTES, 'UTF-8' );
if($langswitch===en){
echo '.lang-en{display:block;}';
echo '.lang-jp{display:none;}';
}else{
echo '.lang-en{display:none;}';
echo '.lang-jp{display:block;}';

wordpressのheader.php等に記述

HTML

<div class="lang-en">英語</div>
<div class="lang-jp">日本語</div>

サンプル

Get

GETで取得しhtmlspecialcharsで特殊文字を HTML エンティティに変換。
「===」厳密等価演算子で比較し一致したらCSSを出力します。

問題点

・ページの文字コードは変わらないため海外SEO的にはよくない
・言語が増えるとCSSの記述が増え冗長になる

使うときは簡単に英語切り替えしたい場合が想定されます。

ページ遷移しても言語を切り替えたままにする場合はjavascriptでlocalstorageを使用しパラメータを保存する等が考えられます。

wordpressの投稿でビジュアル・テキストの切り替えでspanが消える場合

wordpressの投稿画面でビジュアルとテキストを選んで編集することができますが、初期機能では<span>span</span>等をテキストで入力しビジュアルに切り替えると勝手に消えます。

調べるとtiny mceというwysiwygエディタを流用して実装されているとのこと。
プラグインを入れて解決する方法も検索するとでてきますが、プラグインは使用したくないのでfunctions.phpをいじります。

function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'primary';
	$initArray['body_class'] = 'post';
	$initArray['valid_children'] = '+body[style],+div[div|span],+span[span]';
	$initArray['verify_html'] = false;
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

■【WordPress】ビジュアル・テキスト切り替えでタグが消える時の対処法(style,div,span,p,br等)
http://hapisupu.com/2015/09/wordpress-editor-visual-text-switch-tag-erase-fix/

上記のブログから教えていただきました。

spanで囲って装飾をつけたりする場合必須ではないでしょうか。

css3で回転(時計回り)

CSS3で2D右回転アニメーションしてみました。

.rote {display:block; width:100px;animation: rote 1.5s ease 0s infinite;}
@keyframes rote {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(-180deg);}
	100% {transform: rotate(360deg);}
}

回転します

-指定で逆回転です。

値を変更できます。

ease
linear
ease-in
ease-out
ease-in-out

右側は0sからイーズを持たせるかどうか。

infiniteは無限ループ