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 からどうぞ。

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

背景画像の縦横比率にぴったり合ったサイズで表示するjQueryプラグイン「Background Fit」

「Background Fit」は、HTMLタグに設定した背景画像の縦横比率にぴったり合ったサイズで表示する jQuery プラグインです。

jQuery プラグイン「Background Fit」とスタイルシートの background-image プロパティとの違いは、背景画像の縦横比率に合ったサイズを計算して指定したブロック要素 (またはインライン要素) の表示サイズに調整して、背景画像を全面に表示します。

続きを読む

楽天市場の商品ページから商品リンクが作成できるブックマークレット「楽ちんアフィレット」

楽天市場の商品ページから商品リンクが作成できるブックマークレット「楽ちんアフィレット」をつくりました。

たまに商品リンクを使うときがあって、そのときは楽天アフィリエイトのページで商品ページのアドレスを入力して商品リンクを作成していたのですが。いちいち面倒だなぁ。商品ページから直接商品リンクが作成できたらいいいなぁと...。アマゾンの商品ページにはアソシエイトツールバーがあって、そこから直接商品リンクの作成ができますが、楽天市場では楽天ブックスなど一部を除き、直接商品リンクの作成ができないようだったので、ブックマークを選ぶと直接商品リンクを作成するページにダイレクトに飛ぶブックマークレットをこさえました。

インストール

以下のリンクをブックマークツールバーにドラッグ&ドロップするか、ブックマークに登録してください。

楽ちんアフィレット

商品ページでブックマークに登録している「楽ちんアフィレット」を押すだけで商品リンク作成ページが表示。リンクの作成が楽ちんにできます。あとは、こんな感じでブログやホームページに貼り付けるだけ。

使いかた

  1. 楽天市場の商品ページへ。
  2. ブックマークに登録している「楽ちんアフィレット」を押してください。
  3. 商品リンク作成ページが別ウインドウで開きます。(ログイン時)
  4. HTMLソースをブログやホームページに貼り付けます。

ブログの記事作成やコンテンツ制作のお供にどうぞ。

Enjoy Shopping!! Enjoy Affiliate!!

最近の投稿

カテゴリー

アーカイブ