WEB

WordPressで「>」などが勝手にエスケープされる問題を解決する方法

WordPressのバージョン5になったあたりから、投稿のエディタがものすごく使いづらくなりました。
ほんと、余計なお世話的な機能満載で記事が書きづらくてしょうがないです。特にテキストエディタで投稿してる人は書きづらいと感じてる人が多いのではと思います。

プラグイン導入で解決できたのでメモ。

使いづらい点

まずは、使いづらいと思った点。

  • 1. <や>、&などが勝手にエスケープされる
  • 2. 自動整形機能

1については、ソースコードとかを載せる人にはやっかいな問題。
「>」が「&gt;」に、「&」が「&amp;」とかに勝手に変換されてしまう現象です。

エディタエリアからフォーカス外した時点で、変換されてしまいますし、しまいには編集ページを開くたびに「&」が「&amp;」に変換され、どんどん&amp;が増えていく始末。

2については、エディタエリアからフォーカスが外れた際に自動でインデントやスペースが整形される現象。
整形されるだけならまだいいのですが、整形の度に表示部分がずれてカーソル見失ったりするので面倒。

特に、htmlコードを入力途中でフォーカス外れたときの補完がやっかいです。
勝手に途中の文章を挟んだり、おかしくなります。

対応方法

上記2つの対応方法として「Classic Editor」というプラグインが良かったです。
投稿編集ページがバージョンアップする前の旧バージョンになりますが、勝手にエスケープ問題も自動整形も解決します!

あと、新バージョンだとパーマリンクの設定に気づきにくく忘れがちなので、旧バージョンの方が好みです。

「Classic Editor」のプラグインはインストールして有効化すればOK!

Classicつながりでウィジェット編集を旧バージョンに戻す方法はこちら
WordPressのウィジェットが使いづらい!従来のウィジェットに戻す方法

良きWordpressライフを!

Phalconのバージョン確認方法

PHPのフレームワーク「Phalcon」のバージョン確認方法をメモ。

サーバーで以下のコマンド実行で確認できます。

php -r "echo Phalcon\Version::get();"

Phalcon5は以下のコマンドで確認できます。

php -r "echo (new Phalcon\Support\Version())->get();"

※Phalcon5のVersion Componentのマニュアル
https://docs.phalcon.io/5.0/ja-jp/support-version

【Phalcon】Validator\Fileのエラー strtr(): The second argument is not an array

PHPのフレームワーク「Phalcon」で画像のバリデーションをしようとしたところエラーが発生したのでメモ。

エラーメッセージ
FastCGI sent in stderr: "PHP message: PHP Warning: strtr(): The second argument is not an array in {filepath}

環境

  • PHP 7.1.33
  • Phalcon 3.2.2

原因

Phalconのバグのようです。
2017年9月頃に修正が終わっているようなので、それ以降の3.2.x系のphalconだと大丈夫みたいです。
https://github.com/phalcon/cphalcon/issues/12947

今回は2017年9月以前のPhalcon3.2.2を使用していたため、エラーが発生。
コードは以下のようにしていました。

Formクラス

・・・
use Phalcon\Forms\Form;
use Phalcon\Forms\Element\File;
use Phalcon\Validation\Validator\File as FileValidator;

class xxxx extends Form
{
	$imageFile = new File('image_file');
	$imageFile->setLabel('画像');
	$imageFile->addValidators(array(
		new FileValidator(array(
			'allowEmpty' => true,
			'maxSize' => '2M',
			'messageSize' => ':field exceeds the max filesize (:max)',
			'allowedTypes' => array('image/jpeg', 'image/png'),
			'messageType' => 'Allowed file types are :types',
			'maxResolution' => '800x600',
			'messageMaxResolution' => 'Max resolution of :field is :max'
		))
	));
	$this->add($imageFile);
}

allowEmpty=trueで空を許可したので、画像を入力しなかった場合はエラーになりません。
画像を入力したときのみエラーになります。

allowEmpty=falseの場合は、画像未入力でもエラーになります。

対応策

Phalcon\Validation\Validator\File は使えないので、カスタムバリデーション等で対応。

いったん、バージョンアップするまでこんな感じでカスタムバリデーションを作成して暫定対応しました。

複数画像対応とか制約とか足りない部分もありますが、ベースとしてはこんな感じ。

カスタムバリデーション

namespace App\xxx\Validation\Validator;
 
use Phalcon\Validation;
use Phalcon\Validation\Message;
use Phalcon\Validation\Validator;
 
/**
 * Fileのバリデーション
 *
 * Phalcon\Validation\Validator\Fileがバグでうまく動作しないのでカスタムで作成(バグ:phalcon3.2.xの最新で改善するよう)
 */
class File extends Validator
{
    /**
     * バリデーションの実行
     * 
     *     use App\xxx\Validation\Validator\File as FileValidator;
     * 
     *     new FileValidator(
     *         [
     *             "maxSize"              => 3072, // キロバイトで指定
     *             "messageSize"          => "field exceeds the max filesize ",
     *             "allowedTypes"         => [
     *                 "image/jpeg",
     *                 "image/png",
     *             ],
     *             "messageType"          => "Allowed file types are types",
     *         ]
     *     )
     *
     * @param Validation $validator
     * @param string     $attribute
     * @return boolean
     */
    public function validate(Validation $validator, $attribute)
    {
        $request = $validator->getDI()->get('request');
        if (!$request->hasFiles(true)) return true;
 
        $file = $this->getTargetFile($attribute, $request->getUploadedFiles(true));
        if (!$file) return true;
        
        $maxSize = $this->getOption('maxSize');
        if (!is_null($maxSize)) {
            if ($file->getSize() > $maxSize * 1024) {
                $message = new Message($this->getOption('messageSize'), $attribute, 'maxSizeFile');
                $validator->appendMessage($message);
                return false;
            }
        }
 
        $allowedTypes = $this->getOption('allowedTypes');
        if (!is_null($allowedTypes)) {
            if (!in_array($file->getRealType(), $allowedTypes)) {
                $message = new Message($this->getOption('messageType'), $attribute, 'allowedTypesFile');
                $validator->appendMessage($message);
                return false;
            }
        }
        return true;
    }
 
    /**
     * リクエストからバリデーション対象ファイルを取得
     *
     * @param array $attribute key
     * @param array $files $request->getUploadedFiles()
     * @return Phalcon\Http\Request\File | null
     */
    public function getTargetFile($attribute, $files)
    {
        foreach ($files as $file) {
            if ($attribute === $file->getKey()) {
                return $file;
            }
        }
        return null;
    }
}

javascriptでHTML要素取得!兄弟や親、子要素も!jQueryとも比較!

javascriptでHTML要素取得!兄弟や親、子要素も!jQueryとも比較!

javascriptで要素を取得する方法をご紹介していきます。

併せてjQueryでの書き方も記載しておきます。

ご紹介する要素の取得位置はこちら。
「idが"sample"のdiv」を基準としています。

<div> // この要素を取得する方法(親要素)
	<span>前の要素</span> // この要素を取得する方法(兄弟要素)
	<div id="sample"> // この要素を取得する方法(ターゲット要素)
		<span> // この要素を取得する方法(子要素)
		test // この要素を取得する方法
		</span>
	</div>
	<span>後の要素</span> // この要素を取得する方法(兄弟要素)
</div>

取得位置の上から順に記載していきます。

なお、要素のみ取得(指定)ですので、テキストやHTMLを取得したい時は、
javascriptであればinnerTextやinnerHTML、jQueryであればtext()やhtml()で取得してください。

続きを読む

javascriptでHTML要素削除!jQueryとも比較!

javascriptで要素を削除する方法をご紹介していきます。

併せてjQueryでの書き方も記載しておきます。

ご紹介する要素の削除位置はこちら。
「idが"sample"のdiv」を基準としています。

<span>上の要素</span> // この要素を削除する方法
<div id="sample"> // この要素を削除する方法
test // この要素を削除する方法
</div>
<span>下の要素</span> // この要素を削除する方法</pre>

削除位置の上から順に記載していきます。

続きを読む