お問合せ先 無料見積もり

APRICOT DESIGN BLOG

WordPressの投稿でJQueryを使う

UPDATE : 2017.02.21

アプリコットデザインのブログ

wordpressの投稿内では基本的にjavascript使えませんよね。
という事は、JQueryも使えないって事に・・・はなりません。


簡単に使う方法があるんです。

e0d8fda805593eb160e4cf503da2edfd_s
javascriptは<div>で囲めば使える事を知っている人はいると思いますが、JQueryも書き方1つで使えます。

その方法とは・・・
$()~を使わずに
jQuery()~を使う方法です。

下記がその例です。

「click」リンクを押すとomakeという文字が赤色で。
「textエリア」の方は、書いた文字が青色で反映されます。
PCの場合はテキストエリア内に文字を書いて、エリア外をクリックすると。
スマホの場合は確定を押せば反映されます。

click
ここに表示されます→「

↓cookie削除ボタン


ページの再読み込みを行うと先ほど書いた文字がcookieから呼び込まれます。
ただ、safariだと、文字のバイト関係か何なのかcookieが上手く読み込めないですね。
英数字だといけます。
Androidは通常動作します。


で、調べました!

どうやら、safariだと2バイト文字は文字化けしてしまうようで、間にエンコード・デコードを入れないと駄目なようでした。

下記はコード見本です。
全て投稿内に書いてます。
実際に投稿内に書く場合は、左にスペースを入れないように!
 %MINIFYHTML9514c0d79c33e36457fff0d0ef56c5ea8%//表示部分
click




←この二つは何故か勝手に入ります?wordpressの影響?いらない部分です。
こんな感じで、JQueryも使えます。
ちなみにcookieを使うことで、別のページへ擬似的にPOST風にデータを渡すことも。
他のwordpressで使用中のcookieも読み込まれてしまうので、目的のcookieデータを抽出する処理も入れました。
正確にはPOSTではないのでcookieにデータ残りますから、セキュリティー的にはどうかと。。。
一応cookie削除ボタンも付けときました。

でもわざわざ、ヘッダーに書き込まなくてもいいので便利です。
ただ、テキストモードのみで編集して下さい。
ビジュアルモードだとダメかも。(これもタブレットだと面倒なので試してません・・・)

ということで、JQuery使えますよということで。

おまけで、このページのプロフィール画像ハックしました(笑)
全部、投稿内js処理のみです。
いや、厳密に言うとハックではないかな、でも投稿内から正常な処理を上書きしてるからハックかな??
ちなみに、僕はアノニマスじゃないです。

ちょっと工夫をして間にphpファイル挟んでリターンして来れば他のことも。

————————————-
今回の音楽


David Guettaとのfeaturingでafrojackがいるのも僕的にはポイントです。

  • javascript
  • jquery
  • WordPress
  • システム開発
  • 投稿

営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

[長野オフィス-本社-]
〒381-2246
長野県長野市丹波島1-805

[東京ブランチ]
〒100-0004
東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

[松本ブランチ]
〒390-0851
長野県松本市大字島内4619-3 QuintetDoor 1階南室

[金沢ベース]
〒920-0831
石川県金沢市東山1丁目10-1 103

記事が気に入ったら「いいね」してね。(SNSとは連動してません)

0

無料見積

まずは無料でお見積もりを作成いたします。
お気軽にお問い合わせください。

無料見積もり

お問合せ先

クリックで
事務所一覧が
開きます

tel.0120-622835

営業時間/9:00〜18:00 
定休日/土日祝日

Copyright © 2020 APRICOT DESIGN All Rights Reserved.