“WordPress” カテゴリの記事（51件）

この度、弊社WillさんいんのWebサイトをリニューアルしました。これまでは一つのWillさんいんのサイトとして WordPress で構築し、このブログもその中にカスタム投稿タイプを使って組み込んでいましたが、今回のリニューアルでは、WordPress のマルチサイト機能を使い、ブログだけでなく事業毎にサイトを分けて構築しました。

マルチサイト機能を使ったサイト構築は、これまでの業務の中で多言語サイトなどいくつかの制作実績がありますが、これまではデザインがほぼ同じサイトでした。でも今回は、ベースとなるデザインは同じですが、ブログは元より、それぞれの事業サイトでも異なるデザインとなっています。

一般的に企業サイトとブログが存在する場合、それぞれに WordPress をインストールして構築・運用されているパターンが多いような気がしますが、一つの WordPress で構築・運用すると、プラグイン等を一元管理できるというメリットがあります。その一方で、デザインが異なる場合は特にテーマの設計が複雑になります。

Welcart をインストールすると、WordPress のユーザー権限に「編集者（設定権限無し）」「編集者（マネジメント権限無し）」の2つの権限が追加されます。「編集者」としての権限は WordPress デフォルトの編集者権限と同様ですが、Welcart メニューに対する権限は、「設定権限無し」が商品管理と受注・会員管理のみ、「マネジメント権限無し」が商品管理のみとなっています。

いずれも各種設定権限が与えられないわけですが、営業日設定についてはショップ担当者に更新を委ねたい、つまり編集者でも権限を与えたいという場合があるのではないでしょうか。

「編集者（設定権限無し）」あるいは「編集者（マネジメント権限無し）」でも営業日設定だけは権限を与えたいという場合、ユーザー権限を WordPress デフォルトの「編集者」として、管理者権限以外に不要な権限を与えない設定を行うことで可能です。

“Welcart の「編集者（設定権限無し）」ユーザーでも営業日設定権限は与えたい” の続きを読む »

Welcart で商品購入時にお客様情報を入力する場合や発送先を入力する場合、あるいは会員登録する際のメンバー情報入力フォームについての問題。名前や住所、電話番号などの項目とテキスト入力欄などのフォーム部品には、ラベルによる関連付けがありません。ラベルはアクセシブルなフォームにとって最低限必要な要素であり、これではアクセシビリティ的によろしくありません。

メールアドレスとパスワードの入力枠については、テーマファイルに直接記述しますので、その記述の中でラベルによる関連付けを加えることができますが、名前や住所、電話番号などの項目はプラグインによって自動生成されますので、容易にソースを変更することができません。（プラグインのファイルを編集すれば可能ですが、アップデートの際の不具合の可能性や手間を考えるとプラグインのファイルは触りたくないので）

そこで jQuery を使ってラベルによる関連付けを加えてみました。

“Welcart のメンバー情報入力フォームにラベルを設定” の続きを読む »

Welcart のカート関連のページとメンバー関連のページは「固定ページ」として登録され、この2つの固定ページから以下の各ページが出力されます。

カート（スラッグ：usces-cart）

カートの中、お客様情報、発送・支払い方法、内容確認、購入完了　など

メンバー（スラッグ：usces-member）

新規入会フォーム、会員ログイン、マイページ、新パスワード取得　など

これに定番の Breadcrumb NavXT プラグインを使ってパンくずリストを設定すると、カート関連ページは全て「HOME > カート」、メンバー関連ページは全て「HOME > メンバー」のように出力されてしまいます。これではパンくずリストとしてあまり適切ではありませんので、それぞれのページのタイトルを表示するようにしてみました。

“Welcart のカートページとメンバーページのパンくずリストを最適化” の続きを読む »

久々の投稿です。現在、WordPress 用のショッピングカートプラグイン Welcart を使用して、とあるショッピングサイトを構築しています。この Welcart、日本製の無料プラグインで専用のテーマが付いているので、とりあえずショッピングサイトを始めるには比較的簡単に導入できるのですが、オリジナルのテーマを作ってカスタマイズしようとすると、無料であるが故に？いろいろと癖があるようです。

というわけで、しばらく Welcart ネタが続くと思います。

Welcart の特徴として、商品は WordPress の「投稿」として登録します。商品は「item」配下のカテゴリに属すのですが、「投稿」という枠の中に通常の投稿と商品が混在し、様々な表示を制御するうえでいろいろと面倒なので、「投稿」は商品のみとして扱い、お知らせなどの投稿はカスタム投稿タイプを使うようにしました。

カスタム投稿タイプについては特に何も説明することはないと思いますので、「投稿」を管理画面上でわかりやすくするために施したあれこれについて書きます。

“Welcart で「投稿」を商品のみに使用するためのあれこれ” の続きを読む »

WordPress のメールフォームプラグイン「MW WP Form」のセレクトボックスで、先頭に「選択してください」と表示してこれを空欄とみなす方法として、サポートフォーラム等で紹介されている方法は、次のように JavaScript を使う方法です。

管理画面でセレクトボックスを配置するときに

[mwform_select name="hoge" children=",山,海,川"]

のような感じでchildrenの最初に , を入れます。
これでvalueが空の項目が追加されます。
このままだと「選択してください」の表示がされないので、JavaScriptを使い

<script type="text/javascript">
jQuery( function( $ ) {
  $( '#mw_wp_form_mw-wp-form-710 select option[value=""]' )
  .html( '選択してください。' );
} );
</script>

としてやると表示されるようになります（セレクタは適当に合わせてください）。

ただ、これだと option 要素の内容（label）がないので HTML5 の文法的にはバリデーションエラーとなります。もっとも、MW WP Form では form 要素の action 属性の値が空なので、ここもバリデーションエラーとなるのですが。

で、いろいろ試していたら、MW WP Form の機能だけで簡単に、先頭に「選択してください」と表示してこれを空欄とみなす処理ができることがわかりました。

“MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法（JavaScript 非使用）” の続きを読む »

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 の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の 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 を共有する” の続きを読む »