カスタム投稿タイプのデフォルトウィジェット一式が詰まったWordPressプラグイン「Custom Post Type Widgets」をリリースしました

カスタム投稿タイプで活用できるデフォルトウィジェット 6 点が詰まった WordPressプラグイン「Custom Post Type Widgets」を作りました。

作ったのはおよそ 3 年前になりますが。最近ソースコードを整理して、というかほぼ標準ウィジェットのソースをベースに機能拡張とリファクタリングしたのをリリースしました。

デフォルトウィジェット 6 点

機能は、Custom Post Type や Taxonomy で絞り込みができる以外は、WordPressの標準ウィジェットとほぼ同じです。

ユーティリティプラグイン「Custom Post Type Rewrite」で日付ベースのパーマリンクを追加

デフォルトでは、カスタム投稿タイプでカレンダーやアーカイブなど日付ベースのリンクが機能しません。WordPressは、カスタム投稿タイプを使ったパーマリンク設定が一部用意されていないようです。なのでカスタム投稿タイプでブログと同じように機能しません。そのためには、カスタム投稿タイプのパーマリンク設定が編集できたり、パーマリンクを追加してくれるプラグインを導入する必要があります。

今回パーマリンクを追加してくれるユーティリティプラグイン「Custom Post Type Rewrite」も作ったのであわせて使ってみてください。ほかにパーマリンク構造が編集できるプラグイン「Custom Post Type Permalinks」などいろいろあるので検討してみてください。

以上でカスタム投稿タイプでブログとほぼ同じように機能します。個人的にコレを実現したかった。是非活用してみてください。

標準ウィジェットと置き換える方法

WordPressプラグイン「Custom Post Type Widgets」を有効化すると、WordPress管理画面のウィジェットにある「利用できるウィジェット」に標準のウィジェットといっしょに追加されます。

標準ウィジェットと機能的に同じで重複して並ぶのはあれだなぁと。標準ウィジェットと置き換えたい場合の Tips です。以下のソースを functions.php にコピペするだけ。

function remove_default_widget() {
unregister_widget( 'WP_Widget_Recent_Posts' );
unregister_widget( 'WP_Widget_Archives' );
unregister_widget( 'WP_Widget_Categories' );
unregister_widget( 'WP_Widget_Calendar' );
unregister_widget( 'WP_Widget_Recent_Comments' );
unregister_widget( 'WP_Widget_Tag_Cloud' );
}
add_action( 'widgets_init', 'remove_default_widget' );

管理画面をスッキリとさせたい場合はどうぞ。

参考: Function Reference/unregister widget

ダウンロード & インストール

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

ライセンス

GNU General Public License v2.0 (GPLv2) licenses

開発

GitHub

Donationware

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

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

thingsymのほしい物リスト

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)

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

ページの先頭へスムーズに戻る 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 プロパティとの違いは、背景画像の縦横比率に合ったサイズを計算して指定したブロック要素 (またはインライン要素) の表示サイズに調整して、背景画像を全面に表示します。

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

最近の投稿

カテゴリー

アーカイブ