WordPress テーマファイルをXHTML1.0 strictからHTML5に変換してみた。

2017年06月3日 正午の月齢:8.7  月名:九日月  潮汐:小潮 月齢:8.7[九日月] 潮汐:小潮 | 5か月前 | 旧暦:2017年05月09日 | 先勝
WordPress | コメントはありません

この記事を読むのに必要な時間の目安: 6分ぐらい

今までXHTML1.0に10年以上こだわってきましたが、プラグインなどがHTML5として作られてきたため、もうそろそろ限界かなぁと思い、テーマの構文をXHTML1.0 strictからHTML5に変換することにしました。XHTMLのカチッとしたルールが好きだったんですけどねー。

とはいうものの、ほとんど手を入れなくてもいいようなので、とりあえずヘッダまわりを修正し、<hearder>や<nav>などの要素を、既存のdiv要素のブロックにかぶせるように付けて、ハイできあがり。

今までのXHTML1.0 strictは、

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="http://susu.cc/wp-content/themes/susu03/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://susu.cc/wp-content/themes/susu03/print.css" type="text/css" media="print" />
<link rel="Shortcut Icon" href="http://susu.cc/wp-content/themes/susu03/images/favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://susu.cc/feed" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://susu.cc/feed/rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://susu.cc/feed/atom" />
<link rel="pingback" href="http://susu.cc/xmlrpc.php" />
<link rel="index" href="index.php" />

でした。ちゃんとXML宣言(IE対策あり)も記述していたんです。

これをHTML5にしたところ、

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://susu.cc/wp-content/themes/susu04/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://susu.cc/wp-content/themes/susu04/print.css" type="text/css" media="print">
<link rel="shortcut icon" href="http://susu.cc/wp-content/themes/susu04/images/favicon.ico" type="image/x-icon">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://susu.cc/feed">
<link rel="alternate" type="text/xml" title="RSS .92" href="http://susu.cc/feed/rss">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://susu.cc/feed/atom">
<link rel="pingback" href="http://susu.cc/xmlrpc.php">
<link rel="index" href="index.php">

というふうになりました。名前空間の宣言が減ってしまったから、なんていうか、パンツをはき忘れたようなスースー感があって、ちょっと落ち着かないなぁ。もう少し慣れるまでには時間がかかりそう。

サイトの閲覧者からみると、一見何も変わっていないように見えてあまり面白くないかも。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

http://susu.cc/2017/06/wordpress-html5.html/trackback

WordPress4.2以降の絵文字対応を無効化する。

2015年09月14日 正午の月齢:1.2  月名:二日月  潮汐:大潮 月齢:1.2[二日月] 潮汐:大潮 | 2年前 | 旧暦:2015年08月02日 | 先負
WordPress | コメントはありません

この記事を読むのに必要な時間の目安: 3分ぐらい

久しぶりにW3CのMarkup Validation Serviceを開いてみると、すごく怒られてしまいました。

w3c01

Line 42, Column 83: cannot generate system identifier for general entity "c.getContext"

Line 42, Column 83: general entity "c.getContext" not defined and no default entity

Line 42, Column 95: reference not terminated by REFC delimiter

Line 42, Column 95: reference to entity "c.getContext" for which no system identifier could be generated

などなど。どれも記憶にない記述ばかり。「なんだこりゃ?」と思ってソースを見ると、見たこともないスクリプトが書き込まれていました。勝手に書き込んで文法がムチャクチャなんて。それとも今使っているテーマがxhtml1.0 strictだから? html5だったら大丈夫なのかな。

どうやらWordPress4.2以降、絵文字に対応したことにより追加された「絵文字を画像に置き換えるスクリプト」のようですが、どうせ絵文字なんて使わないし、自分としては不要な機能。

いずれにしても、美しくないソースをさらけ出していることのほうが恥ずかしいので、このスクリプトをどうにか止めなくてはなりません。参考にしたのはこちらのサイト。

ここに書かれている「functions.phpにコードを追加する」を頂戴して、

function disable_emoji() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}
add_action( 'init', 'disable_emoji' );

をfunctions.phpに追加しました。で、もういちどチェック。

w3c02

やったー。これで文法違反の汚名は晴らすことができましたー。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

http://susu.cc/2015/09/wordpress42-pictscript-off.html/trackback

Firefox40以降でフォームのフォントがおかしくなる件の対応。

2015年09月10日 正午の月齢:26.8  月名:二十七日月  潮汐:中潮 月齢:26.8[二十七日月] 潮汐:中潮 | 2年前 | 旧暦:2015年07月28日 | 仏滅
ソフトウェア | コメントはありません

この記事を読むのに必要な時間の目安: 3分ぐらい

会社で使っている勤務管理のwebシステム、いつからかわからないけれど画面に違和感があるなぁとは思っていたのですが、理由がわかりました。以前とフォントが変わっています。でもすべてのフォントが変わっているわけではなくて、フォーム内のリストやユーザーIDを入れるテキストボックスのみ。こんなところだけ欧文セリフ体っていうのもイヤなので、解決方法を探ってみました。

環境はWindows XP、Firefox最新版です。ええ、諸般の事情でまだXPです。「この問題はFirefox 40.0.3で修正されました。」と言われているんですけど、XPは置き去りですか。そうですか(涙)。

参考にしたサイトはここらへん。

解決方法として、

input {font-family:"MS Pゴシック";}
input,select,textarea {font-family:"MS Pゴシック";}

と、書いてみました。

input,select,textarea {font-family:"MS Pゴシック";}

だけでいいかなと思ったんですけど、なぜか効かなかったので(キャッシュのせい?)。

書いた場所と方法は、

  1. Windowsのメモ帳を開き、CSSを書く。
  2. これをuserContent.cssと名前を付けて保存する。
  3. Firefoxの「ヘルプ」→「トラブルシューティング情報」を開く。
  4. 「アプリケーション基本情報」にある「プロファイルフォルダ」の、「フォルダを開く」ボタンを押す。
  5. chromeという名前のフォルダを作成、その中にuserContent.cssを入れる。

という流れ。Firefoxを再起動するとOK。

このテの問題は環境に影響を受けやすくて、「絶対にこうすればいいんだ。」とはなかなか言いにくいのですが、こういう例もあるということで参考程度にしてください。自宅のパソコン(XP&7)では再現できなかったんですよねー。

あーそれから、"MS Pゴシック"と、英字とスペースが半角になっていますが、実際は全角です。全角英数字殺しのおまじないを仕込んでいるので、半角で表示されてしまうのでした。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

http://susu.cc/2015/09/firefox40formfontfix.html/trackback