こんにちは!Webデザイナーのアズサ(@azusascom)です。
先日、「【JINカスタマイズ】プロフィールにボタンをつける」という記事を書きました。
@azusascom さんの記事を参考にプロフィールにボタンを設置!#JINカスタマイズ
https://t.co/VjHIjwj5ak pic.twitter.com/sbmgBbCC9O
— ネズミとネコ|Info Village (@infovillage_t) 2019年1月27日
試してくれた人がいてウハウハ喜んでたところ、こんなツイートが。
試してみたんですが、できませんでした😂
— ショッティ@誰がキングボンビーやねん (@SHO_TTINew) 2019年1月27日
なぬー!なんで??
ということで今回は、トラブル発生と解決のお話です。
備忘録として解決方法も書いてますが、必要ない方は華麗にスルーでお願いします。
目次
半角をコピペすると全角に変換される問題
原因を探るため、キングボンビー似のショッティさんのブログを確認します。
恐縮です。ブログ拝見しました。
プロフ欄の記述に問題があるかと。誤:<div class="”profile_link”">
正:<div class=”profile_link”>ダブルクォーテーションが余計に入ってました。
お手数ですが、修正していただけるとありがたいです。— アズサ@Webデザイナー (@azusascom) 2019年1月27日
HTMLの記載に誤りがあったんです。
誤:<div class="”profile_link”">
ダブルクォーテーションが全角と半角2つある
正:<div class="profile_link">
ダブルクォーテーションが1つ
ダブルクォーテーションが重複してたので、原因はすぐ判明。HTMLやCSSは1文字でもミスがあったら正常に動いてくれないんですよね。
最初は入力ミスだと思ってたんですが・・・解決しませんでした。
確認しましたが、ダブルクォーテーションは間違ってないようです。
そのまま、コピーさせていただいてますし💦— ショッティ@誰がキングボンビーやねん (@SHO_TTINew) 2019年1月27日
コピペしたのにダブルクォーテーションが重複するってどいうこと?
しかも、ダブルクォーテーションのひとつは勝手に全角に変換されてるし。
問題が2つに増えとるぞ(/ω\)
原因はWordPress
まずは全角に変換される問題から。原因はなんと、WordPress!
犯人は意外と近くにいるんですよね。調べたらすぐに分かりました。 知識不足でごめんちゃい。
WordPressには、入力された文字列を自動に変換する機能が実装されています。
自動変換される理由はいくつかありますが、ダブルクォーテーションの場合、見やすくするためだと考えられます。開発者の親切心ですね。
普通の記事ならありがたい自動変換ですが、コードを書くときは困っちゃう。
読者さんに「コピペしても使えないじゃん。何このブログ。」と思われたらマズイので、なにか手を打たねばなりませぬ。
対応 ⇒ ボタン設置完了のご報告
またまた調べたら、またまたあっさり分かりました。自動変換を防ぐ方法が。
早速ブログを修正。
アズサさん!できました😆
ありがとうございます!
お手数おかけしました!— ショッティ@誰がキングボンビーやねん (@SHO_TTINew) 2019年1月28日
よかったよー。ショッテイさん、ボタン設置完了。
できたツイートがあるまで、ヒヤヒヤして待ってました。正直、ブログ書いたときより頭使いましたね。緊張から開放されて眠くなっちゃいましたから。
WordPressやブログについては、毎日新しい技術が生まれてるし、知らないことが山程あります。日々勉強ですね。
WordPressブログのコピペで全角変換を防ぐ方法
実際に行った対策を記載しておきます。不要な場合は読み飛ばしてくださいませ。
コード
remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('the_title', 'wptexturize');
追加場所
「外観」「テーマの編集」「テーマのための関数(functions.php)」
コード内の3行をコピペするだけです。
FTPソフトも必要ないので簡単でした。
HTMLやCSSなどブログ内でコードを紹介する場合は、自動変換を防ぐ方法をやっておいてくださいね。
WordPressテーマをカスタマイズする場合、子テーマをダウンロードし、有効化しておいてください。
バージョンアップで親テーマを更新すると、カスタマイズした内容が消えてしまいます。
ダブルクォーテーション重複の原因は謎
全角への自動変換は原因と解決方法が分かりました。でも、ダブルクォーテーションの重複は原因が判明せず。
コピーして、そのままウィジェットのプロフィールに貼り付けましたよ💡
そのあとで、ブログのURLを【】の間に貼り付けました!— ショッティ@誰がキングボンビーやねん (@SHO_TTINew) 2019年1月28日
メモ帳やEvernoteを使ったり、Macの言語設定などでも自動変換されるようです。
でも、自分でコピペを試しても再現しないし、重複については分かりませんでした。
後日改めて調べる予定です。
もし、コピペでダブルクォーテーションが重複する原因を知ってる方がいましたら、お手数ですがご連絡をお願いします。
失敗しながら成長していく
今回は、自動変換問題と一応解決するまでのお話でした。
- WordPressブログでは、特定の記号をコピペすると全角に自動変換される仕様になってる。
- 自動変換を回避する方法がある。
- 問題解決すると喜んでもらえる。
こちらの知識不足で手間と時間をかけてしまいましたが、最後にはありがとうと言ってもらえました。嬉しいですね。
問題が発生しても、解決方法を見つけて発信していけば成長することを実感しました。
過去の失敗談は「WordPressで複数ブログを運営するコツと方法は?」という記事でも書いてるので、よかったらよんでみてくださいね。
ではでは。
当ブログでは、無料でWebデザインのお悩み相談を受け付けてます。
- Webデザイン関連:画像作成・配色など
- WordPress関連:テーマ・プラグイン・操作方法など
- HTML・CSS関連
- ブログを始める方法
どんな些細なことでも構いませんので、お気軽にご連絡くださいね。