WordPressのサイトヘルスで1点問題がありました。 調べてみるとこのような記事が見つかりました。 WordPress.org support “The loopback request returned an unexpected status code 403.“ 原因は wp-admin/.htaccess によるアクセス制限でした。念のため、レンタルサーバーのエラーログを開いてみると、 というログが残っていました。この xxx.xxx.xxx.xxx の部分がサーバー自体のIPアドレスで、これを .htaccess で許可する必要があります。ということで .htaccess に を追加して、あらためてサイトヘルスを開いてみると、 ループバックの問題が解消できました。
さて、進行中のウェブサイトを確認するため Local By Flywheel を起動しようとすると、 このダイアログが表示されて、先に進まない様子。 調べてみると、[Regenerating Docker Machine TLS Certificate, checking system won’t start](https://localwp.com/community/t/regenerating-docker-machine-tls-certificate-checking-system-wont-start/5235)という記事があって、 さらに手順をまとめた記事がありました。感謝。 この手順で復旧完了。
あまり利用する機会はないかもしれませんが、ダッシュボードのあるページを印刷する際に admin menu は不要かもと思って 試してみました。 Admin pagesのカスタマイズ方法はこちら（Plugin API/Action Reference/admin enqueue scripts） 概要は、メディアクエリの print を定義して、 adminメニュー領域を非表示にする。 ダッシュボードのコンテンツ領域(#wpcontent)の左側マージンをなくす。 以上です。
Polylang プラグインPolylangを使って、ホームページ多言語化 その１：インストールして使ってみる | ゆうそうとITブログ プラグイン導入に際し、参考にさせていただきました。m(__)m Language switcherはウィジェットとして設置するので、使用するテーマがウィジェットに対応している前提。 テーマのウィジェット対応 上のページの例だとfunctions.phpのID home_right_1 とテンプレート側のID sidebar-1 が異なるので、実装する際はこのIDを揃える。 外観 -> ウィジェット から Language Switcher を追加。 How to display the widget flags horizontally? デフォルトだと選択する言語が縦に並ぶので、横に並べたい場合のスタイル指定。
先日の WordPress Meetup で Docker 環境を試しました。 ゆるウェブもくもく会 #1 ＠ミュゼ灘屋 当日は phpunit コマンドが実行できることを確認して終了。 その後、実際にプラグインを追加してテストが通るところまで確認できたので、いくつか試したことをメモっておきます。 まずはこちら。Docker公式のドキュメント。 Quickstart: Compose and WordPress これでローカルの起動までは簡単にできるのですが、WordPressのファイルがホスト側にマウントされないので、 Dockerにシェルで入って操作、編集する必要があります。 次に参考にさせていただいた記事。 Docker ComposeでWordPressを構築する こちらだと docker-compose.yml を置いた場所に /html/ というフォルダができるので、ここから WordPress の各種ファイル操作ができます。 ただしこの環境だと phpunit まわりが入っていないので、必要なコマンド群を手作業でインストールする必要があります。 WordPressのイメージのカスタマイズで参考にした記事がこちら。 Custom WordPress Docker Setup Dockerfile を編集して必要なコマンドをインストールすれば良さそう。 と調べているうちに、必要なものが一通り揃ったものがありました。感謝。 akahigeg/wordpress-plugin-unittest-on-docker – GitHub こちらのソース一式をクローンなりダウンロードなりして、 $ docker-compose up -d とすれば、phpunit用にカスタマイズされたWordPressのイメージで起動できます。 Dockerfileを編集した場合は、 $ docker-compose down して、 $ docker-compose build $ docker-compose up -d という操作をすれば良さそうです。 少し気になるのが Docker 内のファイルのパーミッション。 この環境だと my-plugin の owner が root になるようで、 $ docker-compose exec –user www-data wordpress bash このようなユーザー指定で操作を試しているところです。 補足 site health を開いて、不要なテーマを削除しようとすると FTP ログインが求められたので、 wp-config.phpを開いて、 define(‘FS_METHOD’,’direct’); を追加しました。
Twitterでアクセシビリティについて話し合うようなメッセージが流れていて、都合で参加できなかったのでわかる範囲でまとめておきます。 どちらかというと、視覚障害者（音声利用者）寄りの内容です。 音声利用（スクリーンリーダー）をするには、それぞれのOSについて下記のようなツールがあります。 私自身は晴眼者で、音声利用をする機会はほぼなくて、盲ろう者（視聴覚重複障害）のボランティアの経験が少しある程度です。 紹介しているツールについての詳しい知識はありませんのであらかじめご了承お願いします。 音声利用ツール Mac, iPhone, iPad VioceOver for Mac VoiceOver for iPhone Windows ナレーター for Windows PC-Talker for Windows NVDA for Windows Android Android ユーザー補助機能の概要 Android TalkBack を有効にする WordPress 当サイトもそうですが、仕事でWordPressを使う機会が多いので、WordPressのアクセシビリティについて探してみました。 Make WordPress Accessible ここから辿っていくと良さそうです。 例えば Readability を開いてみると、 Good practice: Start with a short summary of the content Divide the rest of the text in short blocks Use headings and lists and meaningful link text Avoid large blocks of text という説明があります。 音声利用の場合、コンテンツを全て読み上げてからでないとそこに何が書かれているかわかりませんので、あまり階層が深くて複雑なページ構成になっていると、読みたい記事があってもなかなかたどり着けないと思います。上に引用したように、先頭にサマリーがあって、テキストが比較的短いブロックに分かれていて、見出しやリンク文字列が理解しやすい、大きなブロックは出来るだけ避ける、といった配慮が必要と思います。 参考資料 Web Content Accessibility Guidelines (WCAG) 2.0 論文作成・発表アクセシビリティガイドライン（Ver.3.0） 総務省:みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)
昨年(2018)秋頃から、あるサイトでspamがたくさん届くようになったとのことで対処。 方法としては、 (1) reCAPTCHAによる自動送信の回避 (2) Akismetによるメールアドレスチェック (3) 入力内容によるフィルタ など。 で、(1)と(2)は適宜実施するとして、(3)について調べてみました。 ちなみに、問題となっているサイトは日本語のみでの運用のため、日本語が入力されていない場合はエラーにする方向で考えています。 参考にさせていただいた記事 Contact Form 7で本文に日本語が含まれていない時は送信できないようにする方法 Custom Validation | Contact Form 7 textarea* は何らかのひらがなが含まれていること。 text* your-address は半角英数が含まれていないこと。 としてみました。
年明けの勉強会の予習というかメモ書き。 クロコラボ #20 headタグの中を考えてみよう 少しずつ書き足していきます。 文書メタデータ（ヘッダー）要素 文書レベルメタデータ要素 Qiita:色々あるHTMLのmetaタグなど一覧 JavaScriptはhead内で読み込みたい 結論としてはhead内で良さそう。 Document metadata – HTML 5.2 W3C Recommendation, 14 December 2017 headタグの短い例 headタグの長い例 文書レベルメタデータ要素 エンコーディングを宣言する 要素は 要素の内部かつ HTML の始めから 1024 バイト以内に配置しなければなりません。 これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。 Document.title – タイトル What’s in the head? Metadata in HTML https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML タイトル <title>Page title</title> Document’s character encoding <meta charset=”utf-8″> charsetをISO-8859-1に変えて文字化けを確認してみる。 Adding an author and description <meta name=”author” content=”name here…”> <meta name=”description” content=”description here…”> Googleで MDN Web Docs を検索してみる。 descriptionの内容やtitleが検索結果に利用されていることを確認。 その他のメタデータタイプ Open Graph Data: Facebookが作ったプロトコル。ウェブサイトの提供をリッチに。 <meta property=”og:image” content=”ロゴデータのパス…” <meta property=”og:description” content=”サイトの説明…” <meta property=”og:title” content=”サイトのタイトル…” <meta name=”twitter:title” content=”サイトのタイトル…” カスタムアイコン <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> 他に、iPadのホームスクリーン用の高解像度アイコンを定義するなど。 CSSやJavaScriptファイルを組み込む。 <link rel=”stylesheet” href=”my-css-file.css”> <script src=”my-js-file.js”></script> Primary Languageの設定 <html lang=”ja”> The Open Graph protocol http://ogp.me/ Basic […]