2016年7月22日
カテゴリー: WordPress
この記事は2016年7月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で
add_editor_style("editor-style.css");
を記述することで、ビジュアルエディタにeditor-style.css が適用されます。
しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。
そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。
“ビジュアルエディタと公開画面で CSS を共有する” の 続きを読む »
2016年6月7日
カテゴリー: WordPress
この記事は2016年6月7日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Webページを Facebook 等にシェアした際に適切な情報を表示させる OGP 。これを WordPress のテーマファイルに設定する方法は、ググるといろいろ紹介されています。
その中の og:image を設定する部分の記述ですが、大抵、次のように紹介されています。
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?).*?>/i'; // 投稿記事に画像があるか調べる
if ( is_single() or is_page() ){ // 記事か固定ページの場合
if ( has_post_thumbnail() ){ // アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">'. "\n";
} elseif ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive() ){ // アイキャッチは無いが画像がある場合
echo '<meta property="og:image" content="'.$imgurl[2].'">'. "\n";
} else { // 画像が1つも無い場合
echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
}
} else { // 記事や固定ページ以外の場合(ホーム、カテゴリーなど)
echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
}
?>
記事ページか固定ページの場合、アイキャッチ画像があればそれを、アイキャッチ画像は無いが本文に画像がある場合はそれを、画像がない場合と記事や固定ページ以外は予め用意したデフォルト画像(上記では ogp_image.png)を設定するという記述です。
ただ、Facebook の仕様では 200×200px に満たないサイズの画像は og:image として設定できないため、上記の記述では、本文内に小さい画像がある場合は、シェアした際に画像が表示されません。
そこで、画像が 200×200px に満たない場合はデフォルト画像を設定するようにしてみました。
“WordPress で og:image を設定する際に小さい画像を除外する” の 続きを読む »
2016年3月12日
カテゴリー: WordPress
この記事は2016年3月12日に書かれたものです。情報が古い可能性がありますのでご注意ください。
以前、「Peter’s Collaboration E-mails」と「User Role Editor」、そして「WP Post Branches」プラグインを使って、公開中のページを更新する際の承認フローを実装した記事を書きました。
→ 公開中のページを公開したまま編集して承認待ちにする
これでうまく実装できたかに思えたのですが、ひとつ問題がありました。どんなに検証を重ねていても、いざ運用してみると見えなかった問題が明らかになるということは多々あります。
今回の案件、元々それぞれのコンテンツに対して担当者は1人という設定だったのですが、運用開始時点でいくつかのコンテンツに対しては複数の担当者が携わることになり、そこで問題が見つかりました。それは次のようなパターンです。
“WP Post Branches プラグインによるブランチの作成者をログインしているユーザーに置き替える” の 続きを読む »
2016年1月10日
カテゴリー: WordPress
この記事は2016年1月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress で承認フローを作成する場合、「Peter’s Collaboration E-mails 」と「User Role Editor 」の2つのプラグインを組み合わせる方法が、多くのブログ等で紹介されています。その基本は「Peter’s Collaboration E-mails」で承認者を設定して、寄稿者が投稿した際に承認者にメールで通知されるようにし、「User Role Editor」では、寄稿者にファイルのアップロード権限を付けたり、独自のロールを作成したりするというものです。
今回、承認フローが必要な案件があり、上記のプラグインを導入して実装しました。さらに「Peter’s Post Notes 」プラグインも導入して承認依頼や差し戻しの際のメールにコメントを追加できるようにしました。
しかし、これだけでは実現できないことがありました。それは、公開中のページを差し替える場合の承認フローです。ページを公開したままの状態で、寄稿者が内容を修正して承認待ちとし、承認者が確認してページを差し替えるという流れが必要ですが、WordPress には差し替え用のページを作る機能はありませんので、公開中のページは修正した流れで即更新することになります。また、そもそも寄稿者は公開中のページを編集することができません。「User Role Editor」で寄稿者に公開中のページを編集する権限を付けることは可能ですが、そうすると、そのまま更新するこも可能になってしまいます。
そこで、「Revisionary 」と「WP Post Branches 」という2種類のプラグインを試してみました。機能としては「Revisionary」がマッチしていますが、機能が特化している故に様々な問題があり、最終的に「WP Post Branches」を使い、不足する機能を他のプラグインや設定で補うことで、目的のフローを実装することができました。
“公開中のページを公開したまま編集して承認待ちにする” の 続きを読む »
2015年12月27日
カテゴリー: WordPress
この記事は2015年12月27日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の管理画面はレスポンシブwebデザインにより、スマートフォンからでも容易にサイトを更新することが可能です。(WordPress に限らず、最近多くの CMS で管理画面でもレスポンシブwebデザインが採用されていますね)
スマートフォンからよくアクセスする場合、ホーム画面にwebクリップを保存すると便利ですが、そのまま保存したのではアイコンがログイン画面のサムネイル画像となってしまいます。たとえ対象のWebサイトにwebクリップアイコンを設定してあったとしても、ログイン画面には適用できません。そこで、ログイン画面にwebクリップアイコンを設定してみました。
まず、144×144ピクセル以上のアイコン画像を用意します。Webサイトのロゴでも WordPress のロゴでもいいでしょう。用意したアイコンを、使用しているテーマディレクトリの images ディレクトリに保存します。
wp-login.php を開き、149行目 </head>
の手前に以下のコードを挿入します。
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/images/clip-icon.png" />
※clip-icon.png は保存したアイコン画像のファイル名です。
これで、ログイン画面をホーム画面に保存すると、設定したwebクリップアイコンが適用されます。
なお、WordPress をバージョンアップすると wp-login.php が置き換わります。一度ホーム画面に保存してしまえば影響ありませんが、再度保存する場合は、改めて書き替える必要があります。