テーマの切り替えを無効にする新機能「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) を作りました。

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.4.1 - 2016.09.12)

続きを読む

ページの先頭へスムーズに戻る 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() で判断してコンテンツを切り替えて表示するシンプルなテキストウィジェットです。

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. 完了

ダウンロード

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のほしい物リスト

最近の投稿

カテゴリー

アーカイブ