ご相談・お問い合わせはこちらから

テーマの切り替えを無効にする新機能「Disable Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりました

デバイス毎にテーマを切り替える WordPressプラグイン「Multi Device Switcher」を大幅に新機能を追加してアップデートしました。

アップデート内容は4つあります。テーマの切り替えを無効にする新機能「Disable Switcher」はじめ、WordPressのコマンドラインツール WP-CLI に対応した「Multi Device Switcher Command」、WordPressの管理画面にあるテーマカスタマイザー対応、Cookieを実装して JavaScript でのデバイス判定も可能になりました。

WordPressのウェブサイト開発環境 VAW (Vagrant Ansible WordPress) を作りました。

WordPressのウェブサイト開発環境 VAW (Vagrant Ansible WordPress) を作りました。

WordPress のウェブサイト開発環境 VAW (Vagrant Ansible WordPress) を作りました。

vargrant_log.png ansible_logo_black_square_small.png wordpress-logo-stacked-rgb.png

VAW は、WordPress でウェブサイトを構築する開発者、サイト運営者、WordPress のテーマ・プラグイン開発者のための Ansible playbooks です。Vagrant で開発環境やテスト環境を素早く立ち上げて、ウェブサイトの構築や動作検証ができます。もちろん、WordPress テーマやプラグインの開発も。

また、VAW は、開発パートナーやデザイナー、クライアントとポータブルに環境を共有してコラボレーションツールとして活用できます。

VAW の特長は、3つ。

  1. 様々な組み合わせのサーバとデータベース構成で構築
  2. 様々な設定やデータに処理を施した WordPress を構築
  3. Develop & Deploy ツールのインストール

1. サーバ、データベース環境の構築

サーバは、Apachenginx から、データベースは、MySQLMariaDBPercona MySQL から構成してサーバとデータベースが構築できます。また、サーバ nginx は、リバースプロキシとして FastCGI 構成で PHP-FPMHHVM から、PHP実行環境を構築します。

WordPress の動作確認やウェブサイトのパフォーマンスチューニングなど作った環境でサーバやインフラの検証ができます。

2. WordPress 環境の構築

素の設定の WordPress から本番環境のデータやファイルと同期した WordPress までさまさまな環境を想定した WordPress の構築が実現します。

VAW では、WordPress の様々な設定ができます。たとえば、本番環境の WordPress から XML形式でエクスポートしたファイルやデータベースからダンプした SQL ファイルをインポート。画像も本番環境から uploads ディレクトリをコピーして持ってくるだけで VAW で構築した WordPress に自動的に配置して、必要があればサムネイル画像の再生成もしてくれます。本番環境の URL からテスト環境の URL の置換処理もやってくれます。

以上のようにあらかじめデータを用意しておくだけで本番環境と同じ環境が作れます。その設定済みの VAW をデザイナーさんやクライアントと共有するだけでコラボレーションツールにもなります。

3. Develop & Deploy ツール

ウェブサイトの構築やテーマやプラグインの開発など用途によって Develop ツールと Deploy ツールがインストールできます。

新しいバージョンの WordPress がリリースされた。とりあえず動作確認だけという場合は、Develop ツールと Deploy ツールを入れないでサクッと WordPress 環境を作ってみたり。ガッツリ開発したい場合は、Develop ツールを入れてウェブサイトを構築したり、WordPress のテーマやプラグインを開発。ウェブサイトの運営保守をしたい場合は、Develop ツールを入れて本番環境とのファイルの更新など。有効化するだけで用途にあったツールがインストールできます。

以下、GitHub にある VAW の readme-ja.md です。(updated: version 0.1.1 - 2015.01.14)

ページの先頭へスムーズに戻る jQuery プラグイン「Back to the Top」

ページの先頭 (トップ) へスムーズにスクロールして戻る jQueryプラグイン「Back to the Top」をリリースしました。

といっても作ったのが 3 年ほど前。作ったモノが貯まっているので、暇を見つけて公開できるモノはプロジェクトページを整備して公開してみました。

プロジェクトページはこちらから英語版もあります。

詳しい設定方法は、プロジェクトページに譲るとして、ページの先頭へのリンクは id 属性 backtothetop-fixed を加えるだけでスクロールしても位置が固定されるページの先頭へリンクが実装できます。ページ内リンクはリンク設定するだけ。

カスタマイズも data-* 属性を使ってできます。スクロールの停止位置を px で指定したり、スクロールの動き (イージング) を変えたり、ページの先頭へリンクの表示などいろいろオプションがあります。

サンプル

<a href="#top" id="backtothetop-fixed"
 data-backtothetop-duration="600"
 data-backtothetop-easing="easeOutQuart"
 data-backtothetop-offset="100"
 data-backtothetop-fixed-scroll-offset="500"
 data-backtothetop-fixed-fadeIn="1000"
 data-backtothetop-fixed-fadeOut="1000"
 data-backtothetop-fixed-display="bottom-right"
 data-backtothetop-fixed-bottom="10"
 data-backtothetop-fixed-right="10"
>Back to the Top</a>

Project Page

Repository

パッチやバグ報告、プルリクは、GitHub からどうぞ。

デバイスを判定するis_multi_device関数がWordPressプラグイン「Multi Device Switcher」に加わりました

WordPressプラグイン「Multi Device Switcher」にデバイスを判定する is_multi_device関数が加わりました。

テーマのカスタマイズでデバイスの判定に is_multi_device関数を使ってコンテンツを出し分けたり、WordPress 3.4 から実装された wp_is_mobile関数では物足りない部分をユーザーエージェントを追加修正することで補ってくれます。

PCとモバイルのコンテンツを出し分けるWordPressプラグイン「WP Is Mobile Text Widget」

PCとモバイルのコンテンツを出し分けて表示するWordPress プラグイン「WP Is Mobile Text Widget」をリリースしました。

WordPress プラグイン「WP Is Mobile Text Widget」は、ウェブサイトが閲覧されると、スマートフォンなどモバイルかどうかを WordPress3.4 から実装された関数 wp_is_mobile() で判断してコンテンツを切り替えて表示するシンプルなテキストウィジェットです。

screenshot-wp-is-mobile-text-widget.png

WordPress プラグイン「WP Is Mobile Text Widget」を有効化すると、ウィジェットにテキストウィジェットが追加されます。ウィジェットエリアに追加すると、通常のPC用とモバイル用のコンテンツが保存できます。

インストール

  1. WordPress メニュー「プラグイン > 新規追加」から「WP Is Mobile Text Widget」を検索してインストール (この場合ステップ3へ)、または WordPress のプラグインページから zip ファイルをダウンロードして解凍。
  2. 解凍した "wp-is-mobile-text-widget" をプラグインディレクトリ "/wp-content/plugins/" にアップロード
  3. WordPress メニュー「プラグイン」で「WP Is Mobile Text Widget」を有効化
  4. WordPress メニュー「外観 > ウィジェット」で「WP Is Mobile Text」をウィジェットエリアにドラッグ&ドロップで追加して設定。
  5. 完了

履歴

  • Version 1.0.0 - 2014-08-26
    • Initial release.

ダウンロード

WordPress の公式プラグインページ

ライセンス

GNU General Public License v2.0 (GPLv2) licenses

開発

GitHub (https://github.com/thingsym/wp-is-mobile-text-widget)

Donationware

よろしければ、開発とメンテナンスのために寄付していただければうれしいです。

If you like this plugin, please donate to support development and maintenance.

thingsymのほしい物リスト

新しいサービスのアイデアに役立つデベロッパーブログです。IT/Web技術メモや問題解決策、開発に役立つTips、作ったソフトウェアやツールの紹介。

プロフィール

Thingsym (シングスワイエムと発音します)

ウェブサービスをつくってアイデアをカタチにしているWebエンジニア・デベロッパー。経営者のための顧問サービスやWordPressテーマ販売サービスで経営課題の解決と事業の成長をマーケティングやマネジメント面でサポート。事業開発に取り組んで新しい価値を生み出すビジネスモデルの構築をしています。

最近のテーマは創造性 (creativity)、マーケティング (marketing)、マネジメント (management)

グローバルブログ (英語)

Twitter, GitHub, WordPress

最近のコメント

  • こんにちは 最新バージョンのMulti (なお)
  • 簡潔に書かれていてしかも高機能なスクリプ (nlogn)
  • 環境が悪いのか、スマートフォン(モバイル (まる)
  • Twitterが動かなくなってしまいまし (髙橋柊真)
  • @Anywhereは、Twitterの仕 (tihngsym)
  • x処理をさくっと実装するためにjQuer (burberry sale uk)
  • はじめまして。 あつかましいお願いですが (山之内豊)
  • 試用させて頂いてます。 1つお教えくださ (masai)
  • 上記ブログサイトでMulti Devic (ITポケット)
  • 便利なプラグインを提供していただきありが (よし)
ページの先頭へ