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

2017年06月3日 正午の月齢:8.7  月名:九日月  潮汐:小潮 月齢:8.7[九日月] 潮汐:小潮 | 3週間前 | 旧暦: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

TinyMCEビジュアルエディタのフォントを明朝体から好きなフォントへ変更する。

2015年08月14日 正午の月齢:29.4  月名:月隠  潮汐:大潮 月齢:29.4[月隠] 潮汐:大潮 | 2年前 | 旧暦:2015年07月01日 | 先勝
WordPress | コメントはありません

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

WordPressを更新すると、いろいろと手を加えていたコアファイルの設定が元に戻ってしまいます。できれば毎回同じような作業をしたくないっていうことで、今回はビジュアルエディタのフォントを好きなフォントに設定してみます。

もともとは明朝体っぽいフォントなのですが、どうも記事を書きにくい。決して明朝体が嫌いってわけじゃなく、ワードなんかMS明朝10ポイントしか使わないんですけど、WordPressのときはダメなんだなぁ。英数字のフォントもなんかヘンだし。

tinymce-font_before

で、かつてはwp-includes/js/tinymce/skins/wordpress/wp-content.cssを毎回グリグリといじっていました。body {font-family: "xxx";}みたいな感じで。

新たな方法として、ビジュアルエディタにCSSを適用させます。

その方法を探してみると…くふふ、やっぱりありました。「WordPressビジュアルエディタの明朝体フォントを変更する方法」という、ズバリそのまんまな名前です。ま、詳しいしい方法はリンク先を見てもらえばよいのですが、ちょっと簡単にまとめておきます。

その前に、

明朝体でもまったく問題ない、という方ならそのままでも良いのですが、
できれば実際に記事を公開した時の表示と同じ書式のほうがメリットが多いです。

記事を作成していると、
“作成 → プレビュー 編集 → プレビュー → 編集…”という作業を頻繁に行うのですが、
ビジュアルエディタの書式が明朝体のままだとプレビューした時にかなりズレが出てきて
余計な編集作業が増えてしまいます。

このサイトの執筆者は句読点ごとに改行するようでして、「明朝体のままだとプレビューした時にかなりズレが出てきて余計な編集作業が増えてしまいます」というのが明朝体が気に入らない理由のようですが、ボクは決してそんな高い意識ではなくて、単に「でっかいふにゃふにゃした文字では気持ちよくカケねーよ」的な理由なのです。

で、方法。

  1. editor-style.cssというスタイルシートファイルを作る。
  2. FTPソフトを使って、今使っているテーマのフォルダ内に保存する。
  3. 今使っているテーマのfunctions.phpにビジュアルエディタのフォント変更に関する記述をする。

という順序で進めていきます。

Dreamweaver8でcssの新規作成を選び、以下の内容をコピペ。そしてUTF-8で名前をつけて保存。

/* フォントを指定するクラス */
body.mceContentBody {
font: 13px/1.6 "メイリオ", "MS Pゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
}
.editor-area a {
color: #339933;
text-decoration: underline;
}
.editor-area h3 {
padding: 3px 13px 6px;
font-size: 116%;
color: #666666;
margin-bottom: 1em;
border-bottom: 1px solid #CCCCCC;
}

をそのまま使わせてもらいましたが、お好みに応じて値を変更すればいいと思います。

次にテーマ内へ保存するのですが、これもDreamweaver8のFTPでサイト管理しているので、特に転送ソフトを使わずにテーマファイルのフォルダ内に転送完了。

今使っているテーマのfunctions.phpをこれまたDreamweaver8からほじくり出して、

//---------------------------------------------------------------------------
// ビジュアルエディタのフォント変更
//---------------------------------------------------------------------------
add_editor_style('editor-style.css');
function custom_editor_settings( $initArray ){
$initArray['body_class'] = 'editor-area'; //オリジナルのクラスを設定する
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

と、コメントアウト部分も含めてまたまた丸ごとパク&コピペ。functions.phpのいちばん下に追加しました。

tinymce-font_after

むはーっ、きたきたー。MSゴシックだー。これがWordPressをバージョンアップしても変わらずに維持されるなんて、ぼかぁ幸せだなぁ。

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

前の記事・次の記事

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

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

http://susu.cc/2015/08/tinymce-font.html/trackback