投稿コンテンツがデバイス毎に切り替えられる新機能「Display Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりました

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

アップデート内容は2つあります。

デフォルトのユーザーエージェント更新

デフォルトのユーザーエージェントを更新しました。いままで アンドロイド端末は、Android OS が搭載されているスマホとタブレット端末の両方がスマートフォン用テーマに切り替えられていました。

そのため、WordPressプラグイン「Multi Device Switcher」でAndroidスマホとタブレット端末のWordPressテーマ切り替え方法 を参考に手動でユーザーエージェントを設定してもらっていましたが、今回の更新でデフォルトでスマホとタブレット端末別々にテーマが切り替わるように見直しました。

コンテンツがデバイス毎に切り替えられるショートコード「Display Switcher」

「Multi Device Switcher」のデバイス判定を用いたショートコードでコンテンツの切り替えができるようになりました。

設定は、WordPressの投稿画面のエディター上でショートコード

[multi]PCで見ている時に表示します[/multi]
[multi device="smart"]スマホで見ている時に表示します[/multi]
[multi device="tablet"]タブレット端末で見ている時に表示します[/multi]
[multi device="test"]Custom Switcherでもコンテンツが切り替わります[/multi]

CSSだけでコンテンツの表示非表示をすると検索エンジンからテキスト非表示でスパム的になる可能性をはらんでしまうことを避けるために切り替えたり、コンテンツや画像をスマホ用などデバイス毎に最適化したり、投稿やコンテンツ制作に是非活用してみてください。


Download:

WordPress のプラグインページからどうぞ。

Installation:

WordPress プラグイン「Multi Device Switcher」のインストール詳細はこちらからどうぞ。

Code Repository:

thingsym / multi-device-switcher (GitHub)

Licenses:

Licensed under GPL version 2.0

Donationware:

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

Donationware

ページの先頭へスムーズに戻る WordPressプラグイン「Back to the Top」をリリースしました

去年 2014年10月に jQuery プラグイン「Back to the Top」 をリリースしました。今回、そのWordPressプラグイン版をちょこちょこ作ってリリースしてみました。

jQueryプラグイン版は、jQueryを読み込んだり、HTMLを用意したりと、いろいろ設定が必要になります。オプションがたくさんあるのでカスタマイズが自在にできます。反面、設定が煩わしかったりします。

WordPressプラグイン版は、WordPressにインストールして有効化すると、もろもろデフォルトで設定してくれてそのまま使えます。カスタマイズもオプションページでプレビューを見ながらかんたんに設定できるように作ってみました。

カスタマイズは、ラベルに Webフォントを採用したアイコンが選べたり、スクロールの動き (easing) も。また、上級者向けにスタイルシートがカスタマイズできます。

インストールは、WordPressプラグインページから。または、管理画面のプラグインの新規追加から「Back to the Top」で検索してインストールできます。

WordPressプラグインのインストール方法は「プラグインをインストールする - WordPressマニュアル」を参考にどうぞ。

WordPressプラグイン「Jetpack」のCDN「Photon」をWordPressテーマ・プラグインに実装するスニペット

WordPress プラグイン「Jetpack」にCDN (Contents Delivery Network) で画像を配信する「Photon」があります。「Photon」を使うと、画像配信の分散ができ、サーバの負荷分散やサイトの表示パフォーマンスの向上に繋がります。

「Photon」 は、WordPress.com で使われていたり、自分でホストしている WordPress サイトにプラグイン「Jetpack」をインストールすることで導入できます。

「Photon」の導入は、プラグイン「Jetpack」の「Photon」を有効化するだけで CDN で画像配信されます。

画像配信されるのは、サムネイル画像やアイキャッチ画像だけで、「Photon」で配信されない画像もあります。たとえば、ご自身でテーマやプラグインをカスタマイズしたり、開発した場合。img タグで埋め込んだりすると、画像が「Photon」に対応した形にならないのでうまく配信されません。こういう場合も Photon API が用意されているので、対応ができます。

以下のスニペットで 「Photon」を有効化していると、画像URLを元に Photon用URL を生成して画像配信してくれます。

$image_url = class_exists( 'Jetpack' ) && method_exists( 'Jetpack', 'get_active_modules' ) && in_array( 'photon', Jetpack::get_active_modules() ) ? 'http://i' . mt_rand( 0, 2 ) . '.wp.com/' . str_replace( array( 'http://', 'https://' ), '', esc_attr( $image_url ) ) : esc_attr( $image_url );

「Photon」を利用する場合、WordPress.com を使っているか、WordPress サイトにプラグイン「Jetpack」をインストールしている場合に限りますと、利用規約にあるのでご注意を。

WordPressプラグイン「Multi Device Switcher」をアップデートしました。

今回の WordPressプラグイン「Multi Device Switcher」アップデートは、is_disable_switcher(), is_pc_switcher() の2つの関数を追加しました。

これまでのアップデートでデバイスの判定に is_multi_device関数を使ってコンテンツを出し分けたり、JavaScript でのデバイス判定を使った WordPressテーマのカスタマイズが可能です。

今回も is_disable_switcher(), is_pc_switcher() の2つの関数の追加でさらに詳細な状態のデバイス判定ができるようになりました。テーマを編集してコンテンツを出し分けたり、function.php で WordPressのオプション設定を切り替えたりできます。

is_multi_device(), is_disable_switcher(), is_pc_switcher() の3つ関数でテーマのカスタマイズができる環境を整えてみました。

サンプルコード

たとえばスマートフォンでアーカイブの投稿表示件数を 10 件にする場合、スマートフォンで表示するテーマの function.php にこんな感じで書いて。ってことができます。

if ( function_exists( 'is_multi_device' ) && function_exists( 'is_pc_switcher' ) ) :
function custom_posts_per_page_count( $query ) {
  if ( is_multi_device('smart') && ! is_pc_switcher() ) {
    if ( $query->is_main_query() ) {
      set_query_var( 'posts_per_page', 10 );
   }
  }
}
add_action( 'pre_get_posts', 'custom_posts_per_page_count' );
endif;

以上、テーマのカスタマイズで是非活用してみてください。


is_pc_switcher() function

is_pc_switcher() function is a boolean function, meaning it returns either TRUE or FALSE. Return the the state of PC Switcher by the Multi_Device_Switcher class. Return true if the theme has switched by the PC Switcher.

Usage

<?php is_pc_switcher(); ?>

Example

<?php
if ( function_exists( 'is_pc_switcher' ) ) {
  if ( is_pc_switcher() ) {
    /* Theme switched by the PC Switcher. Display and echo specific stuff here */
  } else {
    /* Display and echo specific stuff here */
  }
}
?>

Parameters

None

Return Values

(boolean) Return the state of PC Switcher.

is_disable_switcher() function

is_disable_switcher() function is a boolean function, meaning it returns either TRUE or FALSE. Return the state of disabled by the Multi_Device_Switcher class.

Usage

<?php is_disable_switcher(); ?>

Example

<?php
if ( function_exists( 'is_disable_switcher' ) ) {
  if ( is_disable_switcher() ) {
    /* Disabled. Display and echo specific stuff here */
  } else {
    /* Display and echo specific stuff here */
  }
}
?>

Parameters

None

Return Values

(boolean) Return the state of disabled.


Download:

WordPress のプラグインページからどうぞ。

Installation:

WordPress プラグイン「Multi Device Switcher」のインストール詳細はこちらからどうぞ。

Code Repository:

thingsym / multi-device-switcher (GitHub)

Licenses:

Licensed under GPL version 2.0

Donationware:

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


Donationware



カスタム投稿タイプのリンクを追加するWordPressプラグイン「Custom Post Type Rewrite」をリリースしました

カスタム投稿タイプのパーマリンクを追加するWordPressプラグイン「Custom Post Type Rewrite」をリリースしました。

カスタム投稿タイプを使ってテーマを開発するとき、ブログとして機能しなかったりします。カスタム投稿タイプでは日付ベースと投稿者ベースのパーマリンクが対応していないのが原因。

プラグイン「Custom Post Type Rewrite」は、カスタム投稿タイプを使ったとき、WordPressがデフォルトで用意されていない一部のパーマリンクを追加してくれるユーティリティプラグインです。

WordPress管理画面のパーマリンク設定に対応して以下のパーマリンクを追加します。

  • 日付ベース
  • 投稿者ベース
  • フロント

カスタム投稿タイプを使ったテーマ開発に是非使ってみてください。

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

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

ライセンス

GNU General Public License v2.0 (GPLv2) licenses

開発

GitHub

Donationware

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

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

thingsymのほしい物リスト

最近の投稿

カテゴリー

アーカイブ