人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  8. SVGでtext要素を上下左右中央寄せする

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. .matchMedia()でJSでもメディアクエリを使って条件分岐する

WordPressなどのツイートボタンでシェアする際に記事タイトルに@(アットマーク)が含まれる場合にエスケープする

ブログを書いていてシェアしたときに記事タイトルに @ が含まれていると その後に続く英数字 がリプライ扱いになってしまい、気になったので回避する方法を紹介します。

WordPress


<?php
$shareTitle = rawurlencode(get_the_title());
$shareURL = rawurlencode(get_permalink());
?>

<a href="//twitter.com/share?text=<?php echo $shareTitle ?>&url=<?php echo $shareURL ?>" target="_blank"></a>

WordPressでオリジナルシェアボタンを実装している場合、このように rawurlencode() で記事タイトルと記事URLを エスケープ していると思います。

しかしこのままだとこのようにツイートしたときに、 @ 以下の部分がリプライ扱いになってしまいます。


<?php
$shareTitle = rawurlencode(get_the_title());
$shareTitle = str_replace('%40', '@&#xfff0;', $shareTitle);
$shareURL = rawurlencode(get_permalink());
?>

<a href="//twitter.com/share?text=<?php echo $shareTitle; ?>&url=<?php echo $shareURL; ?>" target="_blank"></a>

そこで、 rawurlencode() でエンコードした後に str_replace で %40 （エンコードされた @ ）を @&#xfff0; に置換しています。 &#xfff0; は文字コードとして存在しますが、 実際には見えない 文字です。

これで無理矢理ですがエスケープすることができます。

コピペ用


@￰a

a の部分は消して別の文字などに変更して使うことができます。

CSS本執筆しました！！！