“WordPress” タグの記事（55件）

WordPress の管理画面は、以前よく使ってた Movable Type や他の CMS に比べても、とても分かりやすく出来ていると思いますが、さらに使いやすくするために、案件に応じて不要なメニュー項目を削除したり、逆に投稿一覧画面などにはあったら便利という項目を表示させたりしています。

今回、編集者にカスタムメニューの操作権限を与える必要がありました。

まず、通常編集者はカスタムメニューを操作することはできないので、functions.php に以下を記述して操作権限を与えます。

function add_theme_caps(){
  $role = get_role( 'editor' );
  $role->add_cap( 'edit_theme_options' );
}
add_action( 'admin_init', 'add_theme_caps' );

これで編集者にも［外観］メニューが表示されますが、［テーマ］や［カスタマイズ］などのサブメニューは操作してほしくないのでこれらを消す必要がありましたが、この内［カスタマイズ］については他のサブメニューと URL の形式が異なるため、ちょっと工夫が必要でした。

“管理画面のメニューから［外観］→［カスタマイズ］を消す” の続きを読む »

学校等のサイトを構築する際に必要になることがある年度別アーカイブ。Movable Type では FiscalYearlyArchives というプラグインを使って簡単に作成できましたが、今回 WordPress で作成する必要があり、いくつかの記事を参考にさせていただきながら構築できました。

まずは、年度別アーカイブリストの出力です。これはこちらの記事を参考にさせていただきました。
[WordPress] 年度別（4月から始まる）アーカイブリストを表示する | 制作メモ | 560DESIGNS

この記事で紹介されているコードを functions.php に記述しておき、<?php my_get_archives_by_fiscal_year(); ?> で年度別アーカイブリストを出力します。

続いて、年度別アーカイブページの作成。こちらは、サポートフォーラムの以下のトピックを参考にさせていただきました。
トピック: 年度別アーカイブは可能でしょうか？ «  サポートフォーラム — WordPress

年別アーカイブは不要なので、年毎の表示を年度毎にそっくり入れ替えるこの方法で、年度別アーカイブページが生成できました。

そしてここからは、出力されたアーカイブタイトルなどの調整です。

“年度別アーカイブの作成” の続きを読む »

WordPress の管理画面の「投稿」を「お知らせ」などのラベルに変更する方法はググるとあちらこちらで紹介されています。ここでも紹介しますが（笑）、functions.php 以下のように記述します。

function change_post_menu_label() {
  global $menu;
  global $submenu;
  $menu[5][0] = 'お知らせ';
  $submenu['edit.php'][5][0] = 'お知らせ一覧';
  $submenu['edit.php'][10][0] = '新規追加';
}
 function change_post_object_label() {
  global $wp_post_types;
  $labels = &$wp_post_types['post']->labels;
  $labels->name = 'お知らせ';
  $labels->singular_name = 'お知らせ';
  $labels->name_admin_bar = 'お知らせ';
  $labels->add_new = '新規追加';
  $labels->add_new_item = 'お知らせを追加';
  $labels->edit_item = 'お知らせの編集';
  $labels->new_item = '新規お知らせ';
  $labels->view_item = 'お知らせを表示';
  $labels->search_items = 'お知らせを検索';
  $labels->not_found = 'お知らせが見つかりませんでした';
  $labels->not_found_in_trash = 'ゴミ箱にお知らせは見つかりませんでした';
 }
add_action( 'init', 'change_post_object_label' );
add_action( 'admin_menu', 'change_post_menu_label' );

一方、投稿の「カテゴリー」や「タグ」のラベルを変更する方法はなかなか見つかりませんでしたが、「項目名の変更　管理画面編　WordPress – WordPress Snippet」でそのヒントが掲載されていました。

“投稿のカテゴリーのラベルを変更する” の続きを読む »

WordPress では、一般設定でタイムゾーンを設定することによって、投稿日時などがその地域の日時で表示されます。日本時間の場合は “東京” または “UTC+9” を設定します。

先日、ユーザー管理のために使用したプラグインで、登録日時は日本時間で表示されるのに、更新日時とログイン日時が9時間プラスされて表示されるという現象が発生しました。世界標準時（UTC）は日本時間より9時間遅れ。今回は9時間プラスなので、世界標準時で表示されているわけでもありません。

原因がわからないので、仕方なく jQuery で日時を修正することにしたのですが、実装後あらためて確認すると、一般設定で “東京” を設定しているうえに、functions.php に

date_default_timezone_set('Asia/Tokyo');

を記述していたことが原因のようでした。通常はこのように設定していても問題ないと思うのですが、プラグインのバグでしょうか、functions.php の記述を削除したら正しく表示されました。

でも折角ですし、また何か役立つ場合があるかもしれませんので、今回は表示された日時を9時間戻しましたが、世界標準時（UTC）で表示された日時を日本時間に書き替える（9時間進める）方法を記しておきます。

“世界標準時（UTC）で表示された日時を jQuery で書き替える” の続きを読む »

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 を共有する” の続きを読む »

Webページを Facebook 等にシェアした際に適切な情報を表示させる OGP。これを WordPress のテーマファイルに設定する方法は、ググるといろいろ紹介されています。

その中の og:image を設定する部分の記述ですが、大抵、次のように紹介されています。

<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/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 を設定する際に小さい画像を除外する” の続きを読む »

以前、「Peter’s Collaboration E-mails」と「User Role Editor」、そして「WP Post Branches」プラグインを使って、公開中のページを更新する際の承認フローを実装した記事を書きました。
→ 公開中のページを公開したまま編集して承認待ちにする

これでうまく実装できたかに思えたのですが、ひとつ問題がありました。どんなに検証を重ねていても、いざ運用してみると見えなかった問題が明らかになるということは多々あります。

今回の案件、元々それぞれのコンテンツに対して担当者は1人という設定だったのですが、運用開始時点でいくつかのコンテンツに対しては複数の担当者が携わることになり、そこで問題が見つかりました。それは次のようなパターンです。

“WP Post Branches プラグインによるブランチの作成者をログインしているユーザーに置き替える” の続きを読む »

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」を使い、不足する機能を他のプラグインや設定で補うことで、目的のフローを実装することができました。

“公開中のページを公開したまま編集して承認待ちにする” の続きを読む »

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 が置き換わります。一度ホーム画面に保存してしまえば影響ありませんが、再度保存する場合は、改めて書き替える必要があります。

WordPress をマルチサイトで運用するとき、複数のサブサイトの投稿をまとめてメインサイトに表示したい場合があります。

今回、メインサイトとサブサイト（ネットワーク全体）の投稿を時系列にまとめ、メインサイトのフロントページ（ウェブサイトのホームページ）に最新の10件を表示し、一覧のリンクから遷移するページでは全件を20件毎にページ分割して表示、更にネットワーク全体の投稿をまとめた RSS を配信するという実装を試みました。

WP Over Network プラグインを利用して実装したのですが、ページネーションでつまづきました。試行錯誤のうえ、最終的にどうにか実装できたので記しておきます。

“マルチサイトにおけるネットワークの投稿の表示” の続きを読む »