Contact Info

  • aniuma OÜ Harju maakond, Tallinn, Lasnamäe linnaosa, Sepapaja tn 6, 15551

WordPressにカスタム投稿 ( ポスト ) タイプを追加する方法

WordPress ( ワードプレス ) に新たな投稿タイプを追加する時はカスタム投稿という機能を利用すると簡単に投稿・固定ページと同じように投稿タイプを作成することができます。 下記コードをfunctions.phpの最下部に追加することで、自分好みの投稿タイプを作成する事ができショップ情報や事例などの紹介に使うことができます。 また管理画面からの管理の効率があがるだけではなく、WordPressのテーマ開発をおこなうときも通常の投稿と切り離して表示しやすくなったり、カスタムフィールドを追加する時にカスタムがしやすくなります。

カスタム投稿タイプを追加するコード

<?php

// カスタム投稿タイプの作成
function create_posttype() {
    register_post_type( 'new_posttype',
        array(
            'labels'          => array(
                'all_items'          => '一覧を表示',
                'name'               => '新しい投稿タイプ',
                'singular_name'      => '新しい投稿タイプ',
                'menu_name'          => '新しい投稿タイプ',
                'add_new'            => '新規追加',
                'add_new_item'       => '新しい投稿タイプを追加',
                'edit'               => '編集',
                'edit_item'          => '新しい投稿タイプの編集',
                'view'               => '表示',
                'view_item'          => '新しい投稿タイプを表示',
                'search_items'       => '新しい投稿タイプの検索',
                'not_found'          => '見つかりません',
                'not_found_in_trash' => 'ゴミ箱にはありません',
                'parent'             => '親',
            ),
            'description'     => '',
            'show_ui'         => true,
            'show_in_menu'    => true,
            'capadility_type' => 'post',
            'hierarchical'    => false,
            'rewrite'         => true,
            'query_var'       => true,
            'has_archive'     => true,
            'public'          => true,
            'supports'        => array( 'title' ),
            'menu_position'   => 2,
        )
    );
    // 新しいカテゴリーの追加
    register_taxonomy(
        'new_category',
        'new_posttype',
        array(
            'hierarchical'   => true,
            'label'          => '新しいカテゴリー',
            'show_ui'        => true,
            'query_var'      => true,
            'rewrite'        => true,
            'singular_label' => '新しいカテゴリー'
        )
    );
}

// 上記で作った機能の読み込み
add_action( 'init', 'create_posttype' );
上記のコードをfunctions.phpに貼り付けると”新しい投稿タイプ”という名前の投稿タイプと”新しいカテゴリー”という名前のカテゴリーが作成されます。

IntelliJ IDEAのショートカットキーまとめ

チェコに本社を置くJetBrains社が開発する統合開発環境のIntelliJ IDEAを使っているのですが、長年 Sublime Textを利用してきたためショートカットキーが意図した動作と違う時がありストレスを感じます…。 設定を変更して自分好みに合わせるといった方法もありますが、なれてしまったほうが早いのでよく使うけど忘れてしまいやすいショートカットと参考リンクをまとめます。
https://qiita.com/yoppe/items/f7cbeb825c071691d3f2
IntelliJ IDEAのショートカットがまとまっています。基本的にこれを見ればok
https://qiita.com/cypher256/items/8ce0527a46bd7cfe43eb

IntelliJだけではなくWebStormやPyCharm・PhpStormなどの公式ショートカット一覧 PDFが見れます

Sublime Text から移行して迷子になってるショートカットキー

ここからは僕が実際に迷っているショートカットキーです。
ショートカットキー動作
⌘ ( command ) +↑ or ↓画面内の最下部か最上部にカーソルを移動
⇧( Shift ) * 2 ( ダブルタップ )どこでも検査 ( ファイル名や関数名をなんでも検索できる )
⌃ ( control ) + Gマルチカーソル
⇧( Shift ) + ⌃ ( control ) + Gマルチカーソル ( 全部 )
⌘ ( command ) + ⌥ ( option ) + Lコードフォーマット
⌘ ( command ) + ⇧( Shift ) + Fファイル横断テキスト検索
⌘ ( command ) + L指定した行に移動
⌘ ( command ) + B定義元にジャンプする
⌘ ( command ) + [ジャンプの前の場所に戻る

『WooCommerce』を採用 / 利用するメリット

ワードプレス ( WordPress ) のECプラグイン (拡張機能) であるWooCommerceを利用すると普段使っているワードプレスをつかったサイトが会員機能とカートがついたECサイトとして利用できるようになります。

WooCommerce対応のプラグインを利用すればさらにECサイトとしての機能拡張もおこなえる拡張性の高さと、 ワードプレスのもつSEOやコンテンツマーケティングのしやすさが特徴です。

ECサイトのプラットフォームとして WooCommerce を採用するメリットをショップを運営する運用面とインハウス (自社) で開発するのメリットの両方をでそれぞれあげていきます。

ショップ・ECサイトを運用するメリット

まずは運営者としてのメリットを3つあげました。それぞれ見ていきましょう。

  1. プラグインを利用してEC機能の拡張ができる
  2. イニシャルコストを抑えて導入が可能
  3. SEOやコンテンツマーケティングがしやすい

EC機能もプラグインで自由に拡張

WordPress の公式ディレクトリには54,494個のプラグインが無料で利用できる

ワードプレスのプラグインは公式ディレクトリに掲載されている無料のものだけで54,494個のプラグイン (拡張機能) があります。WooCommerce専用のプラグイン以外にもこの膨大の数のプラグインを利用してカスタマイズをおこなうことができます。

WordPress.orgのプラグインページにある検索フォームで「Woo」と検索すると1,100個以上のプラグインが該当するので決済方法の追加やお気に入り機能、定期購入の決済を導入など多くの拡張機能を無料または有料で追加することができます。

サーバ+ドメインの費用だけで初期費用を最小限に

WooCommerce はワードプレスと同様にオープンソースという手法で開発されているので、利用するにあたってライセンス料などはかかりません。サーバとドメインの費用だけですぐにECサイトを使うことができます。

またワードプレスのテーマ機能を使って公式ディレクトリにあがっているテーマファイルを自由に利用することができます。

米 Autommatic社が無料で提供する WooCommerce のテーマ『Storefront』

SEOに強く、コンテンツマーケティングを円滑にする

ワードプレスはブログツールとして生まれ現在はCMSまたはパブリッシングプラットフォームとよばれています。また過去には『 WordPressがSEOに強いと言われる理由 – More Publishing 』にも記載されている通りSEOに強いと言われています。

https://susu.mu/archives/509

ECサイトへの流入やコンテンツマーケティングをおこなう上で必要なプラグインやツール・サービスも充実しており、商品の登録や在庫・注文管理なども同一の管理画面 ( ダッシュボード ) でおこなうことができます。また商品と投稿の関連付けなども簡単に設定できるためアクセス解析や共著によるコンテンツマーケティングも効率的におこなうことができます。

フレームワークとして採用するメリット

次にインハウスで開発する場合にフレームワークとして利用するメリットをあげていきます。

  1. ECプラットフォームのシェアが高いので情報量が多い
  2. WordPress の知識が流用できるので開発人材が豊富
  3. 拡張機能 ( プラグイン ) や管理画面の開発工数を削減できる

世界シェアNo.1のECプラットフォームの情報量

ワードプレスは世界のCMSマーケットシェアNo.1の60%をほこり2位のJoomla 5.4%と大きな差をつけて圧倒的人気をほこっています。日本のCMSマーケットシェアは81.5%とさらに高い人気です。

また、日本ではまだシェアの少ない WooCommerce(ウーコマース)ですが、世界的にはみると22%でShopifyを抑え最も使われています。

トラフィックのトップ1000万サイトのeCommerceプロダクトの世界マーケットシェア

ワードプレスの情報は日本でも豊富にありますが、英語圏ではワードプレスと同様に WooCommerce の情報量も多いため開発をするにあたってのソースや教材も豊富です。

WordPressの開発実績があれば学習コストも削減でき開発人材も豊富

WooCommerce はワードプレスの基本機能を使ったECプラットフォームなので、ワードプレスのテーマ制作やプラグイン開発をおこなったことがある人材であれば比較的簡単にカスタマイズや機能開発をおこなうことが可能です。開発を外注に任せたとしても後々インハウスで開発や保守を行っていきたい時に採用面でも苦労することは少ないでしょう。

下記の動画は WordPress の公式イベント WordCamp Tokyo 2017で登壇したWordPressで簡単にECサイトが作れるプラグインの”WooCommerce”を利用してテーマのカスタマイズを行う方法の動画を見ることができます。開発の学習コストの低さや簡単なメリットやデメリットの紹介をおこなっています。

https://videopress.com/v/RaOlr4QX

拡張機能のカスタマイズや管理画面の作成・テストの工数を大幅に削減

CMSなどと違いECプラットフォームはカスタマーのマイページ・注文履歴・登録画面の正常系異常系、または管理者・運営者の商品登録や注文管理、発注作業にともなうステータスやメールの管理などさまざまな機能の管理画面やテスト工数が発生し、スクラッチで開発するには相当なコストが必要になります。

また決済モジュールも多くのプラグインが公式で無料 ( またはサードパーティーのものが有料 ) で提供されているため、決済機能の組み込みもおこなわずに必要なところにリソースを投入することができます。

https://susu.mu/archives/2344
少し前の記事だがWooCommerceに対応している決済会社の紹介記事

以上のようにWooCommerceを活用しECサイトを開発・構築するメリットについてふれてきました。

運営・運用サイドだけではなく開発サイドとしてもメリットの多い WooCommerce の導入を検討の方はお問い合わせフォームよりご相談ください。

[Behat]WordHatでXML(RSSフィード)の表示をテストする

Behatでテストの実行はできたのですが、XML (RSSフィード)を認識していなそうなので。有効にする方法を探しています。

確認済みソース


追記 : 2019年1月31日

Headless Chormeを利用すればXMLをレンダリングできることがわかりました。

BehatでWordPressの振る舞いテストを自動化する「 WordHat」

テーマの開発やWordPressでサービスを構築する時に手間となる振る舞いテストを自動化することができるPHP製のBehatにWordPress特有のテストも加えておこなえる “WordHat” を使ってみました。 導入方法や関連リンクなどをまとめます。

Behatとは?

BehatとはWebサイトやWebサービスの振る舞いをわかりやすく定型 (シナリオ) 化し、各手順を自動的にサイトにアクセスしてテストを自動化することができるPHPでできたツールです。 Behatを使うことによって「サイトにアクセスしたらトップページに○○と表示されている」または「#buttonをクリックしたらこのURLに行き、そこでは○○と表示される」などといったテストを自動で行うことができます。 スプレッドシートでテスト項目を出しながらひたすら潰していきなんていう過酷な修行からおさらばできるだけではなく、依存や影響関係を調べて気を使いなが開発することからも開放されます。もし影響が出てしまったらテスト実行すれば依存・影響があったかどうかも確認できるのでより快適に開発や運用をおこなうことができるでしょう。

WordHatの導入方法

WordHatの導入方法は WordHat – Behat for WordPress に記載のとおりですが、本家では英語の説明しかないため日本語で手順の説明をしていきます。 まずは要件についてです。WordHatを使ってテストをするためには下記項目が必要です。
  • PHP 7.1 以上
  • Composer
  • WordPRess 4.8 以上

インストール

1. ターミナルからテスト用のフォルダを作成し、移動します。
mkdir project
cd project
2. Composerを使ってWordHatをダンロードする。
composer require --dev paulgibbs/behat-wordpress-extension behat/mink-goutte-driver behat/mink-selenium2-driver
3. WordHatの設定ファイルをサンプルからコピーして作成する。
cp vendor/paulgibbs/behat-wordpress-extension/behat.yml.dist behat.yml
4. コピーした設定ファイル (behat.yml) を書き換える
  1. base_url をテストするURLに書き換えます。
  2. path をWordPressのコアファイルがあるディレクトリに相対パス・絶対パスで書き換えます。
  3. users をWordPressの管理者権限に変更します。
  4. WordPressがサブディレクトリにインストールされている場合はFAQを参照してください。
5. Behatの初期設定をおこないます。
vendor/bin/behat --init
6. 設定が完了しているかコマンドを実行して確認する。
vendor/bin/behat -dl
設定がうまくいっている場合は、下記のようにどのようなシナリオをかけるか表示されます。
default | 前提< /^(?:|ユーザーは )ホームページを表示している$/
default | もし< /^(?:|ユーザーは )ホームページへ移動する$/
default | 前提< /^(?:|ユーザーは )"(?P<page>[^\s]+)" を表示している$/u
default | もし< /^(?:|ユーザーが )"(?P<page>[^\s]+)" へ移動する$/u
default | もし< /^(?:|ユーザーが )ページをリロードする$/u
default | もし< /^(?:|ユーザーが )履歴の前のページに戻る$/u
default | もし< /^(?:|ユーザーが )履歴の次のページヘ進む$/u
default | もし< /^(?:|ユーザーが )"(?P<button>(?:[^"]|\\")*)" ボタンをクリックする$/u
default | もし< /^(?:|ユーザーが )"(?P<link>(?:[^"]|\\")*)" のリンク先へ移動する$/u
default | もし< /^(?:|ユーザーが )"(?P<field>(?:[^"]|\\")*)" フィールドに "(?P<value>(?:[^"]|\\")*)" と入力する$/u
default | もし< /^(?:|ユーザーが )"(?P<field>(?:[^"]|\\")*)" フィールドに以下の値を入力する:$/u
default | もし< /^(?:|ユーザーが )"(?P<value>(?:[^"]|\\")*)" という値を "(?P<field>(?:[^"]|\\")*)" に入力する$/u
default | もし< /^(?:|ユーザーが)次のように入力する:$/u
default | もし< /^(?:|ユーザーが )"(?P<option>(?:[^"]|\\")*)" という値を "(?P<select>(?:[^"]|\\")*)" から選択する$/u
default | もし< /^(?:|ユーザーが )"(?P<option>(?:[^"]|\\")*)" という値を "(?P<select>(?:[^"]|\\")*)" から追加で選択する$/u
default | もし< /^(?:|ユーザーが )"(?P<option>(?:[^"]|\\")*)" にチェックをつける$/u
default | もし< /^(?:|ユーザーが )"(?P<option>(?:[^"]|\\")*)" のチェックをはずす$/u
default | もし< /^(?:|ユーザーが)パス "(?P<path>[^"]*)" にあるファイルを "(?P<field>(?:[^"]|\\")*)" に添付する$/u
default | ならば< /^(?:|ユーザーが )(?P<page>[^\s]+) を表示していること$/u
default | ならば< /^(?:|ユーザーが )ホームページを表示していること$/u
default | ならば< /^(?i)url(?-i)が (?P<pattern>"(?:[^"]|\\")*") にマッチすること$/u
default | ならば< /^レスポンスコードが (?P<code>\d+) であること$/u
default | ならば< /^レスポンスコードが (?P<code>\d+) ではないこと$/u
default | ならば< /^(?:|画面に )"(?P<text>(?:[^"]|\\")*)" と表示されていること$/u
default | ならば< /^(?:|画面に )"(?P<text>(?:[^"]|\\")*)" と表示されていないこと$/u
default | ならば< /^(?:|画面に )"(?P<pattern>"(?:[^"]|\\")*")" にマッチするテキストが表示されていること$/u
default | ならば< /^(?:|画面に )"(?P<pattern>"(?:[^"]|\\")*")" にマッチするテキストが表示されていないこと$/u
default | ならば< /^レスポンスに "(?P<text>(?:[^"]|\\")*)" が含まれていること$/u
default | ならば< /^レスポンスに "(?P<text>(?:[^"]|\\")*)" が含まれていないこと$/u
default | ならば< /^"(?P<element>[^"]*)" エレメントに "(?P<text>(?:[^"]|\\")*)" と表示されていること$/u
default | ならば< /^"(?P<element>[^"]*)" エレメントに "(?P<text>(?:[^"]|\\")*)" と表示されていないこと$/u
default | ならば< /^"(?P<element>[^"]*)" エレメントに "(?P<value>(?:[^"]|\\")*)" という値が含まれていること$/u
default | ならば< /^"(?P<element>[^"]*)" エレメントに "(?P<value>(?:[^"]|\\")*)" という値が含まれていないこと$/u
default | ならば< /^(?:|画面に )"(?P<element>[^"]*)" エレメントが表示されていること$/u
default | ならば< /^(?:|画面に )"(?P<element>[^"]*)" エレメントが表示されていないこと$/u
default | ならば< /^"(?P<field>(?:[^"]|\\")*)" フィールドに "(?P<value>(?:[^"]|\\")*)" が含まれていること$/u
default | ならば< /^"(?P<field>(?:[^"]|\\")*)" フィールドに "(?P<value>(?:[^"]|\\")*)" が含まれていないこと$/u
default | ならば< /^(?:|画面に )(?P<num>\d+) 個の "(?P<element>[^"]*)" エレメントが表示されていること$/u
default | ならば< /^チェックボックス "(?P<checkbox>(?:[^"]|\\")*)" のチェックがついていること$/u
default | ならば< /^the "(?P<checkbox>(?:[^"]|\\")*)" checkbox is checked$/
default | ならば< /^the checkbox "(?P<checkbox>(?:[^"]|\\")*)" (?:is|should be) checked$/
default | ならば< /^the "(?P<checkbox>(?:[^"]|\\")*)" checkbox should (?:be unchecked|not be checked)$/
default | ならば< /^the "(?P<checkbox>(?:[^"]|\\")*)" checkbox is (?:unchecked|not checked)$/
default | ならば< /^the checkbox "(?P<checkbox>(?:[^"]|\\")*)" should (?:be unchecked|not be checked)$/
default | ならば< /^the checkbox "(?P<checkbox>(?:[^"]|\\")*)" is (?:unchecked|not checked)$/
default | ならば< /^現在のURLを表示$/
default | ならば< /^最後のレスポンスを表示$/u
default | ならば< /^最後のレスポンスをブラウザで表示$/u
default | 前提< /^(?:there are|there is a) posts?:/
default | 前提< /^(?:I am|they are) viewing (?:a|the)(?: blog)? post(?: "([^"]+)"|:)/
default | 前提< I delete the post :post_title
default | ならば< I should not be able to view the post :post_title
default | 前提< /^(?:I am|they are) on the dashboard/
default | 前提< /^(?:I am|they are) in wp-admin/
default | もし< /^(?:I|they) go to the dashboard/
default | もし< /^(?:I|they) go to wp-admin/
default | もし< I click on the :link link in the header
default | ならば< I should be on the :admin_screen screen
default | 前提< I go to the menu :item
default | 前提< I go to the :item menu
default | ならば< /^(?:I|they) should see an? (error|status) message that says "([^"]+)"$/
default | もし< the cache is cleared
default | 前提< the cache has been cleared
default | 前提< the :name plugin is active
default | もし< I activate the :name plugin
default | もし< I deactivate the :name plugin
default | もし< I switch the theme to :name
default | 前提< /^(?:there are|there is a) users?:/
default | もし< I delete the :user_login user account
default | もし< /^(?:I am|they are) viewing posts published by (.+)$/
default | 前提< /^(?:I am|they are) an anonymous user/
default | もし< I log out
default | 前提< /^(?:I am|they are) logged in as an? (.+)$/
default | 前提< /^(?:I am|they are) logged in as (?!an? )(.+)$/
default | ならば< /^(?:I|they) should not be able to log in as an? (.+)$/
default | ならば< /^(?:I|they) should not be able to log in as (.+)$/
default | 前提< /^I am on the edit ([a-zA-z_-]+) screen for "([^"]*)"$/
default | 前提< /^I am on the edit screen for "(?P<title>[^"]*)"$/
default | もし< /^I change the title to "(?P<title>[^"]*)"$/
default | もし< /^I switch to the post content editor's (visual|text) mode$/i
default | もし< I enter the following content into the post content editor:
default | ならば< /^the post content editor is in (visual|text) mode$/i
default | もし< /^I publish the (post|changes?)$/
default | ならば< I should be on the edit :post_type screen for :post_title
default | ならば< I should see the :title metabox
default | ならば< I should not see the :title metabox
default | 前提< I have the :widget_name widget in :sidebar_name
default | もし< I search for :search in the toolbar
default | ならば< I should see :text in the toolbar
default | ならば< the toolbar should show I am authenticated as :username
default | もし< I follow the toolbar link :link
シナリオを追加したい場合はGherkinの文法を確認しfeatures/sample.featureのファイルにならって追記していけばよいでしょう。
Gherkin Syntax : Cucumber

参考URL


追記 : 2019-01-09

複数行にわたるテキストエリアの振る舞いを追加する場合。
Behat scenario multi line input

ワードプレスのメディア機能とは?

WordPressにはユーザーがアップロードしたメディア (画像、オーディオ、動画、その他ファイル) を管理するメディアという機能があります。 このメディア機能を使いファイルをアップロードしてWordPressの投稿の中に添付したり、ダウンロードできるようにすることが可能になります。 メディアに画像またはファイルをアップロードする方法は大きくわけて二通りです。ダッシュボードの中のサイドメニューにあるメディアという項目を選択し新規追加を選択し表示されたアップローダの中から”ファイルを選択”をクリックするか、投稿または固定ページのブロックエディタから画像やギャラリーのブロックを選択し”アップロード”を選択すると画像を開く画面に遷移し、好きな画像をアップロードそして埋め込むことができます。

ワードプレスのウィジェット機能とは

WordPress [ワードプレス] のウィジェット機能とは、指定されたサイドバーなどのウィジェットエリアにテーマやプラグインで作ったブロックパーツ [ウィジェット] を配置できる機能です。 このウィジェットとは特定の機能をもった小さいな共通パーツのことです。
管理画面からウィジェットを操作する
デフォルトで使えるウィジェットの他にもプラグインを活用すれば、プラグインに対応したウィジェットが使えるためお好みの機能をウェブサイトに表示し利用することができます。 さらに詳しくウィジェットについて知りたい場合は WordPress [ワードプレス] の日本語版ドキュメントであるWordPress Codex を見てみると良いでしょう。

Smart Custom Fieldsで作ったオプションページの権限を変更する方法

オプションページの作成は下記コードでできます。
$capabilityの値を与えたいユーザ権限の持っている実行権限を付与すれば変更できます。
/**
 * @param string $page_title ページのtitle属性値
 * @param string $menu_title 管理画面のメニューに表示するタイトル
 * @param string $capability メニューを操作できる権限(maange_options とか)
 * @param string $menu_slug オプションページのスラッグ。ユニークな値にすること。
 * @param string|null $icon_url メニューに表示するアイコンの URL
 * @param int $position メニューの位置
 */
SCF::add_options_page( 'ページタイトル', 'メニュータイトル', 'manage_options', 'theme-options' );

ユーザーの種類と権限について

ユーザーの種類と権限についてはCodexを参照するとわかります。 ユーザーの種類と権限 – WordPress Codex 日本語版 今回はユーザー権限が編集者を対象にしたかったのでedit_others_postsを選びました。

[code lang=”php”]
function my_register_opiton() {
SCF::add_options_page(
‘俺の設定’, // ページのtitle属性値
‘俺の設定’, // 管理画面のメニューに表示するタイトル
‘edit_others_posts’, // メニューを操作できる権限
‘my_theme_option’, // オプションページのスラッグ(ユニーク)
‘dashicons-admin-settings’, // メニューに表示するアイコン
99 // メニューの位置
);
}

add_action( ‘init’, ‘my_register_opiton’, 10, 4 );
[/code]

参考