こんにちは、アツです!
前回、PHPでフォームを作るにあたって、いったんフォーム周りのHTMLについてまとめました。
その時の記事がこちら。
そのときにコードを載せようとして、何故か載せられなかったため四苦八苦したのですが、解決したので、その経緯をまとめました。
コードを載せるツール「Crayon Syntax Highlighter」
まずコードを乗せるツールとして、このようなツールを使ったのです。
こんなふうに載ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head <meta charset="utf-8"> </head> <body> <form action="./mailmail.php" method="post"> 下記に必須事項を書いてお送りください。<br> 名前:<input type="text" name="name" placeholder="山田太郎" required="true"><br> 年齢:<input type="number"><br> 職業:<input type="checkbox" value="会社員"> 会社員 <input type="checkbox" value="学生">学生<br> 好きなもの:<select name=""> <option value="sample_1">以下から選択<option> <option value="sample_2">りんご<option> <option value="sample_3">みかん<option> <option value="sample_4">ぶとう<option> </select><br> 紹介メッセージ:<textarea cols="15" rows="5"></textarea> </form> </body> <html> |
ところが、これを載せてプレビューすると、タイトル以外何も映らないという事態になりまして、先日は結局四苦八苦してコードを載せられなかったので、コードを載せないでいったん記事をアップしました。
そして、今日も引き続き、解決方法を調べていました。
こちらのツールだけでなく、他のツールも試したりなどしていたのですが、ある時解決方法が見つかりました。
解決法はPHPのコードを編集するだけだった
まずこちらのWordPressをダウンロードしているフォルダ内から、wp-content > plugins > crayon-syntax-highlighter と順番に潜ると、「crayon_langs.class.php」というファイルがありますので、FileZillaなどで自分のPCにダウンロードしてください。
次に、こちらの337行目の //Override と書かれたところにある箇所を変更します。
(変更前)
1 2 3 4 5 6 |
// Override function clean_id($id) { $id = CrayonUtil::space_to_hyphen( strtolower(trim($id)) ); return preg_replace('/[^\w-+#]/msi', '', $id); } |
(変更後)
1 2 3 4 5 6 |
// Override function clean_id($id) { $id = CrayonUtil::space_to_hyphen( strtolower(trim($id)) ); return preg_replace('/[^\w\-+#]/msi', '', $id); } |
ちょっとわかりにくいので、変えた部分を下記に書きますが、
wのあとにバックスラッシュ(\)をいれるのです。wの前にあるのでそれをコピペして貼り付けるだけです。
1 2 3 4 |
//変更前 // return preg_replace('/[^\w-+#]/msi', '', $id); //変更後 return preg_replace('/[^\w\-+#]/msi', '', $id); |
Macの場合、バックスラッシュ(\)をキーボードで入れるにはoptionキーを押しながら、¥キーです。Windowsの場合は、ひらがなの「ろ」を英語モードで打つだけです。
ちなみに使わないかもしれませんが、全角のバックスラッシュは、Win/Macともに、「すらっしゅ」で変換すれば変換候補に出てきます。
これで、保存して、ふたたび元の場所へアップロードすればOKです。
そしてふたたび投稿画面でCrayonでコードを打つと、管理画面上は、見た目は薄い文字になってて変わってないように見えて、大丈夫かどうか心配になりますが、保存してプレビューを見ると成功していることがわかります。
いやー、あせった。
次は、いよいよPHPでページを本格的に作ります!