WordPressはビジュアルエディタメインで使う派です。
HTML打ち込む際はテキストエディタに切り替えるんですが、そこからビジュアルエディタに戻ると消えるHTMLタグ、ありますよね。
それを自分で調整する方法を。
タグ: WordPress
-
WordPressプロフェッショナル養成読本、己の立ち位置がわかる本なのかな
頂いて読んだので
偉そうにレビュー。読み切った瞬間の感想
読み切った瞬間思ったこと。ここを読んで興味が持てなかった方はタブを閉じて頂いて。
@hayashikejinan うん…
— 染谷昌利 (@masatoshisomeya) October 12, 2014
@hayashikejinan 「これ誰が買うねん」は見本誌読んだ僕も思ったのです。ある程度WordPressを使ってる人が網羅的に読む感じなのかなぁ・・・。
— 染谷昌利 (@masatoshisomeya) October 12, 2014
共著者のお一人である染谷先生が反応をくれるという。
レビューする前提
読んでいるぼくは WordPress は初心者を脱し自称中級者。
全ての章に興味を持てるor実践したいと思っているor経験している。
そんな個人的かつ正直なイチ感想という前提でレビューを読み進めて頂けると幸いです。
レビュー(不満)
技術書で多い “○○の歴史” から始まります。
「伝えたいor知っておいて欲しい」みたいな気持ちがあるのでしょう。
しかしながら、決して安くないいわゆる技術書で歴史のお勉強を強いられるのはページ数の無駄遣いじゃないのー？と技術書系でおもむろに始まる歴史には常々疑問。
さて、そんな1章はちょっと別口な話として。
各章ごとの推定レベルがまちまち？
初心者向けから始まる章・ある程度知ってる前提で始まる章などがあって、対象とする読者層が不明な感。
レビュー(満足)
本の題名通り章ごとにその道のプロフェッショナルな人が書かれている内容なのは間違いないです。
WordPress というものを広く深く学べる感じ。
自分の知識や技術の弱いところが把握できるため、わからないところを重点的に学べばトータルの力が付いてくると思います。
大型本で薄めなんですが、内容は濃ゆい。
WordPressプロフェッショナル養成読本
2014/10/16発売、 Kindle版 ￥1,980、大型本 ￥2,138。ほどよい値段でしょうか。
WordPressプロフェッショナル養成読本 [Webサイト運用の現場で役立つ知識が満載! ] (Software Design plus)ﾎﾎまとめ
オススメできるかと言われればむしろオススメはしにくいんですけども、本気で学びたい人ならこの1冊を買って、この本が必要なくなるようにがんばればプロフェッショナルになれるんだろうなー、そんな本だと思いましたよ。
※あくまで個人の感想です。
-
WordPress 管理画面の投稿一覧にアイキャッチを表示すると見やすい。そして野良プラグイン化。
WordPress の管理画面から見られる投稿の一覧にアイキャッチがあれば便利だなーと思ったので実装。
パッと見てわかるようになりますよ。
2014.03.13 いらない消し忘れたコードあったので修正しました
使ったフック
投稿のカラムを触るフックたち。
Codex にはお世話になってます。
投稿一覧にアイキャッチを表示するために実装したコード
以前、投稿一覧に ID を出力するってやつを書いたんですが、似た感じです。
今回はアイキャッチだけ。
// カラムタイトルにフック add_filter( 'manage_posts_columns', 'add_thumb_columns' ); // 各カラム行にフック add_action( 'manage_posts_custom_column', 'add_thumb_column', 10, 2 ); /** * 投稿一覧の行タイトルに thumb を配列キーとした dashicon を追加 * * @param $columns * * @return mixed */ function add_thumb_columns( $columns ) { // サムネイル用のスタイル echo '<style>.column-thumb{width:80px;}</style>'; // サムネイルをカラム先頭に追加するため array_reverse で挟み込んで追加 $columns = array_reverse( $columns, true ); $columns['thumb'] = '<div class="dashicons dashicons-format-image"></div>'; $columns = array_reverse( $columns, true ); return $columns; } /** * 投稿一覧の各行にサムネイル出力 * * @param $column * @param $post_id */ function add_thumb_column( $column, $post_id ) { switch ( $column ) { // 行のキーが thumb なら アイキャッチ を出力 case 'thumb': // アイキャッチがある場合 if ( $thumb = get_the_post_thumbnail( $post_id, array( 80, 80 ) ) ) { // 編集権限、ゴミ箱内かどうかの判別用変数 $user_can_edit = current_user_can( 'edit_post', $post_id ); $is_trash = isset( $_REQUEST['status'] ) && 'trash' == $_REQUEST['status']; // 編集権限があり、ゴミ箱でないなら画像をリンクつきに if ( ! $is_trash || $user_can_edit ) { $thumb = sprintf( '<a href="%s" title="%s">%s</a>', get_edit_post_link( $post_id, true ), esc_attr( sprintf( __( 'Edit “%s”', 'default' ), _draft_or_post_title() ) ), $thumb ); } // 出力 echo $thumb; } break; default: break; } }とまぁテーマの functions.php に書くならこんな感じで。
ちなみに WordPress 3.8未満だと Dashicon がないので適宜置き換えてください。
できあがり
うむ、見やすい。
WordPress 管理画面の投稿一覧にアイキャッチが表示される！ 野良プラグイン化しました
テーマに書くのはもうめんどうだ、という方へ。
野良プラグイン化しました。
公式に登録するほどの機能ではないので。
（あと、ただただめんどくさい野良プラグインを安易に入れることは危険なので、そのへん了承して使ってくれたらいいと思います。
投稿一覧+アイキャッチプラグイン: add-thumb2-admin-posts_v1.1.zip
インストールして有効化するだけです。
ﾎﾎまとめ
いろいろなところへ簡単に手を加えられる WordPress、楽しいですね。
難点は記事におこすこと。
やったことは漏れなく書いていきたいなーなんて。
-
WordPress プラグインを公開するためにやったことまとめ
先日 WordPress のプラグインを公開したんで、手順を覚えているうちにメモ。
登録する際、参考にしたのは公式ページ
以下、公式ページ手順に従って進めます。
制限事項をチェック
読む。
- GNU General Public License v2 かそれ以降との互換が必要。おすすめは “GPLv2 or later.” 。
- プラグインが違法でない＆攻撃的でないこと
- Subversion のリポジトリを使うこと
- 使用者の許可無く外部リンクを埋め込まないこと
- その他ガイドラインに基づくこと
理解した上で次。
GPLv2 の適用（記述）方法はライセンスのページに書いてある。
プラグインを作成
作成して、readme.txt の記述を済ませる。
readme.txt の記述がダメだと叩き返されるので、ジェネレーター
から readme.txt を作って validator
で確認するとよし。
外部 API など使う場合はその旨をユーザーに周知する必要があるため、description に記載。
プラグイン追加のリクエストを送る
プラグイン追加リクエストページより、
- プラグインの名前
- プラグインの説明
- プラグインzipを作ってアップロードした URL
を入力して送信。
プラグイン追加リクエストページ 画面が遷移してメッセージが表示される。
プラグイン審査云々 審査待ちが何件あるとか、メール送信するので受信できるようにしておくこと、など書いてあり。
この段階でもうプラグイン専用ページが生成される。
プラグイン審査待ちではあるがプラグインページ 審査が終わると
審査で不備があればメールで不備を教えてくれ、審査が無事に通ればこんな感じのメールが届く。
プラグインの審査が通りましたよ！ 専用ページができるので SVN でコミット
専用ページができまして、公開の準備OK。
一度 SVN でコミットを入れればもうプラグイン、公開され。
ﾎﾎまとめ
やったことを書いてるだけなんでほんとただの覚え書きです。
少しでも誰かのためになればいいな。
-
WordPress ログイン中の管理画面・管理バーで読み込まれる open-sans ウェブフォントは個人的に不要なので無効化するコードを書いて実装した。
WordPress 3.8 から管理画面のデザインが一新されました。
それに伴い、管理画面のフォントは open-sans ウェブフォントがデフォルト指定になり。
あいにくぼくは日本語ユーザーですので、管理画面内のフォントは 9割方日本語。
「open-sans 別にいらないじゃん」
と考えたため無効化することに。
コアファイルを探す
無効化するために WordPress 内を grep。
/wp-include/script-loader.php 内、wp_default_styles にて発見。
function wp_default_styles( &$styles ) { ～中略～ $styles->add( 'open-sans', $open_sans_font_url ); ～中略～ }これをフック使って取り除けばいい、と。
フック
フックは wp_default_styles 。
Codex http://codex.wordpress.org/Plugin_API/Action_Reference/wp_default_styles はまだ書かれていないようです。
function hoge( &$styles ) { // 処理 } add_action( 'wp_default_styles', 'hoge' );こういう感じで実行です。
open-sans を無効化するコード
やってることは
- 関数作成
- 処理を記述
- フックを登録
というところ。
// 管理バー open-sans ウェブフォントを無効化 function disable_load_opensans ( &$styles ) { $styles->remove( 'open-sans' ); $styles->add( 'open-sans', null ); } add_action( 'wp_default_styles', 'disable_load_opensans' );functions.php にコピペでオッケーです。
ちなみに open-sans、引数を null で再度追加しているのは、open-sans をハンドルとして動いてる他の css があるからです。
日本語以外の多言語環境も考慮すると
日本語環境前提で書きましたが中には多言語環境で使ってるかも。
ということで WordPress が日本語で動いてる時だけ実行するようにすると
// 日本語環境で動いてる場合 if ( get_locale() === 'ja' ) { // 管理バー open-sans ウェブフォントを無効化 function disable_load_opensans ( &$styles ) { $styles->remove( 'open-sans' ); $styles->add( 'open-sans', null ); } add_action( 'wp_default_styles', 'disable_load_opensans' ); }こうなりました。
まとめ
フックをある程度コアのソースを見て使えるようになるとできることが飛躍的に増えてうれしいです。
というか、こういうのをまとめたプラグインを作ったらいいんですねきっと。
-
WordPress 管理画面の投稿・ページ一覧に投稿IDとページIDを追加する便利な functions.php のコードを書いてみた。
「投稿とかページのIDを簡単に調べたいんだけど！！！」
ということなので調べて実装してみた。
投稿IDを使ってどうこうするってのはページで使うことが多いですかね、さて。
コードだけ見れればいい、って方は読まずに一番下までいってください。
関数をフックするポイントは 4つ
投稿・ページ一覧画面に ID を表示できればいいので、一覧のタイトル・行 x2 の 4つでした。
関数の説明は割愛、Codex リンクでお届け。
manage_pages_columns
ページ一覧の行タイトルを操るフック。
manage_pages_custom_column
Codex にはまだドキュメントがありませんね。
http://codex.wordpress.org/Plugin_API/Action_Reference/manage_pages_custom_column
ただ、後述の manage_posts_custom_column と内容はほぼ一緒です。
manage_posts_columns
投稿一覧の行タイトルを操るフック。
manage_posts_custom_column
投稿一覧の各行を操るフック。
Codex はサンプルのコードが載っているのでほんとわかりやすいですね。
ということでしゅっと実装して↓
IDを表示するコードができた
こんな感じ。
functions.php に書くと、投稿・ページ一覧に ID が表示されるようになります。
/** * 投稿・ページ行タイトルに項目 ID を追加する関数 * * @param $columns * * @return mixed */ function add_id_to_columns_title( $columns ) { // 行タイトルに post_id を配列キーとした ID という名前を追加 $columns['post_id'] = __( 'ID' ); // post_id 用のスタイル echo '<style>.column-post_id{width:40px;}</style>'; return $columns; } // 関数をフックして適用 add_filter( 'manage_posts_columns', 'add_id_to_columns_title' ); add_filter( 'manage_pages_columns', 'add_id_to_columns_title' ); /** * 各行に投稿 ID を出力 * * @param $column * @param $post_id */ function add_id_to_column_rows( $column, $post_id ) { switch ( $column ) { // 行のキーが post_id なら ID を出力 case 'post_id': echo "<span class='$column-$post_id'>$post_id</span>"; break; default: break; } } // 関数をフックして適用 add_filter( 'manage_posts_custom_column', 'add_id_to_column_rows', 10, 2 ); add_filter( 'manage_pages_custom_column', 'add_id_to_column_rows', 10, 2 );
投稿一覧にIDが表示されましたー ちなみに、並び替えの実装はしてないので並び替えはできません。
需要があればやろうかしら。
まとめ
プラグインを使ったらできることをあえて、プラグインを使わずやることで勉強になりますほんと。
カテゴリやタグでも他のフックを使えば色々できそうですね。
-
wp_trim_words、文字列を指定した文字数で html タグを除去して取得できる便利な関数がそれ。
WordPress を使ってちょっと込み入ったことをやりたい、ってときに便利なやつです。
最近よく使うのでメモ。
Codex
Codex、ほんと助かります。
wp_trim_words の引数
<?php $trimmed = wp_trim_words( $text, $num_words = 55, $more = null ); ?>ひきすうは3つ。
- $text…必須、切り取りたい文字列
- $num_words…切り取りたい文字数。デフォルト値は 55文字。
- $more…切り取った文字列の後に追加したい文字や html。デフォルトは値 null
配列とかややこしいのは出てこないので使いやすいですね。
注意するのは WordPress 3.3 以上でないとこの関数を実装していないことです。
wp_trim_words を使ってみる
使ってみれば簡単に理解できますきっと。
yahoo.co.jp サイトの文字列を 50文字切り取って出力するサンプル。
<?php $html = file_get_contents( 'http://www.yahoo.co.jp/' ); $html = wp_trim_words( $html, 50, '' ); echo $html; ?> 出力結果は↓ Yahoo! JAPAN ヘルプ Yahoo! JAPANトップページの全機能をご利用いただくには、
はい、文字列だけ取得・出力できました。
html タグは一切残りません、べんり！
$more 部分に html タグなんかを入れたいってときはこんな感じで。
<?php $html = file_get_contents( 'http://www.yahoo.co.jp/' ); $html = wp_trim_words( $html, 50, '…<a href="http://yahoo.co.jp">Yahoo はこちら</a>' ); echo $html; ?>
まとめ
使い方次第で応用が効くので、抜粋の表示をオリジナルにしたい時や1行に収めてリストで色々出力したいときに使うといいかも。
-
DNS prefetch を指定してサイトの表示（ソーシャルボタンとか）を速くする誰でもできる簡単な方法がこちら。（効果がないとの指摘アリ
2013.11.23 追記
誤った使い方であるという指摘がありました。
一読の価値はあるかなと。Mozilla さんの書き方がよろしくないとも言及されてます。
http://tech.no-delay.com/?p=694
2013.12.05 追記
上記サイトが閉鎖？されていました。
テーマが少し一段落。
出来得る限りの表示スピード改善も一段落。
ということで表示速度を少しでも上げるための簡単な手段を一つ紹介。
WordPress用のコードも載せてみます。では。結論が欲しいひとは一番下までワープしましょう。
DNS prefetch というのがそれ
DNS を先読みさせる仕組みのこと。
DNS については Wikipedia を見ればいいと思うよ。
DNS prefetch での効果はというとですね、（引用元: MOZILLA DEVELOPER NETWORK: DNS プリフェッチの制御
DNS による名前解決に必要な帯域幅は小さなものですが、それにかかる時間は非常に大きく、特にモバイル環境では顕著なものとなります。予め名前解決を行っておくことで、例えばユーザーがリンクをクリックした際に、ページが表示されるまでの待ち時間を大きく削減することができ、場合によっては秒単位の効果が現れる場合もあります。
特にモバイル環境においては、 DNS プリフェッチによりページの読み込みにかかる時間が劇的に改善されます。
例えば、多数の画像が表示されるページにおいて、画像が要求される前に名前解決が行われている場合では読み込み時間が 5% 以上削減されるでしょう。
Firefox ブラウザの Mozilla、曰く、です。
これは実装するしか！（ぼくはずっと実装してます
そんな DNS prefetch の効果を目で見てみようか
挙動がわからないと本当に速くなるのかわかりませんね！
ということで、DNS prefetch を有効にしたものとしなかったもので比べてみます。
サンプルとして Facebook, Twitter, Google+, はてなブックマーク のソーシャルボタンを読み込むだけのペラサイトを作って オン/オフ時の挙動を計測してみます。
計測に使用したサンプル
当サイトトップページをURLに指定したソーシャルボタン4つを表示するだけの html。（見なくてもいいところです
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>デフォルト</title> </head> <body> <div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="http://hayashikejinan.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://hayashikejinan.com">Tweet</a> <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script> <div class="g-plusone" data-size="medium" data-href="http://hayashikejinan.com"></div> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function () { var po = document.createElement('script'); po.type = 'text/javascript'; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" data-hatena-bookmark-url="http://hayashikejinan.com" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8"></script> </body> </html>計測に使用したサイト
WebPagetest というウェブサイトのパフォーマンス・最適化を計測できるサイトを使用。
- Test Location…Tokyo
- Browser…chrome
で調べました。
計測結果
計測結果その1。
読み込みが速いことが確認できます。
プリフェッチ適用前
プリフェッチ適用後計測結果その2。
詳細を見てみるとわかりやすいです。
プリフェッチを適用した際、 DNS lookup は事前に行われていることが視覚的に確認できますね！
プリフェッチ適用前
プリフェッチ適用後DNS prefetch の指定方法
html
<header></header>内（<meta charset=UTF-8" />の直後が望ましい）に1行<meta http-equiv="x-dns-prefetch-control" content="on">
これで DNS preftch が有効化されます。
prefetch したいドメインの指定は
<link rel="dns-prefetch" href="//www.example.com">
こういうカタチ、 href のところでスラッシュ2つの後にドメインを記述すればおｋです。
まぁ簡単。
WordPress で DNS prefetch を実装するコード（簡単版
header.php に書くのはあれなんで、functions.php に書きましょう。
ヘッダーに関数をフックしてやればオッケーです。
こんな感じで。
/** * dns prefetch をヘッダーに書き出す関数 */ function dns_prefetch() { // DNS prefetch を on にするタグを出力用変数に入れる $output = '<meta http-equiv="x-dns-prefetch-control" content="on">' . "\n"; // prefetch するドメインを追加していく $output .= '<link rel="dns-prefetch" href="//connect.facebook.net">' . "\n"; $output .= '<link rel="dns-prefetch" href="//s-static.ak.facebook.com">' . "\n"; $output .= '<link rel="dns-prefetch" href="//static.ak.fbcdn.net">' . "\n"; // ↑これを追加したいドメイン名だけ続ける // 書き出し echo $output; } // add_action( 'フック名', 'フックする関数名', 優先順位:今回は真っ先に実行したいので 1 を指定 ) add_action( 'wp_head', 'dns_prefetch', 1 );WordPress で DNS prefetch を実装するコード（推奨
簡単版ではひとつひとつ律儀に追加するわかりやすいコードを書きました。
ただプログラミングとしては若干残念なのでプログラムっぽく書くのが望ましいです。
ということでこれが推奨。
サンプルコードでは各種ソーシャルボタンから呼ばれるドメインを指定しています。
/** * dns prefetch をヘッダーに書き出す関数 */ function dns_prefetch() { // DNS prefetch を on にするタグを出力用変数に入れる $output = '<meta http-equiv="x-dns-prefetch-control" content="on">' . "\n"; // prefetch するドメインのタグひな形 $html = '<link rel="dns-prefetch" href="//%s">' . "\n"; $domains = array( // facebook 'connect.facebook.net', 's-static.ak.facebook.com', 'static.ak.fbcdn.net', 'static.ak.facebook.com', 'www.facebook.com', // twitter 'cdn.api.twitter.com', 'p.twitter.com', 'platform.twitter.com', 'twitter.com', // Google+ 'apis.google.com', 'oauth.googleusercontent.com', 'ssl.gstatic.com', // hatena bookmark 'api.b.st-hatena.com', 'b.hatena.ne.jp', 'b.st-hatena.com', 'cdn-ak.b.st-hatena.com', 'cdn.api.b.hatena.ne.jp', // pocket 'd7x5nblzs94me.cloudfront.net', 'widgets.getpocket.com', // pinterest 'assets.pinterest.com', // WordPress 'stats.wordpress.com', 'i0.wp.com', 'i1.wp.com', 'i2.wp.com', 's0.wp.com', // adsense 'googleads.g.doubleclick.net', 'pagead2.googlesyndication.com', // analytics 'www.google-analytics.com' // 追加する場合 ↓ 先頭の // を消して書き込む //'', '', '', '', '', '', '' ); // 上記 $domains 配列に入れたドメインをひな形 $html に入れ込み、ループで出力用変数に入れる foreach ( $domains as $domain ) { $output .= sprintf( $html, $domain ); } // 書き出し echo $output; } // add_action( 'フック名', 'フックする関数名', 優先順位:今回は真っ先に実行したいので 1 を指定 ) add_action( 'wp_head', 'dns_prefetch', 1 );最後に、 DNS prefetch の対応状況
残念ながら Internet Explorer は 10以降の対応です…残念ながら…
他のブラウザはよっぽど古いバージョンで無い限り対応してます。
ﾎﾎまとめ
一番の高速化は良い速いサーバーを使うのが最善。
とはいえ簡単なことでサイトの表示速度が上がるとうれしいですよねほんと。
知識+環境で一つ上のサイト作りを目指したいところです。
