WordPress プラグイン Polylang の使い方を紹介 - by Takumi Hirashima
WordPress の多言語切り替えプラグイン Polylang の使い方を紹介します。 例えば、多言語サイトを制作する時に便利な方法です。 言語切替の条件分岐 言語を切り替える言語スイッチャーを実装する方法 共通したページスラッグを使用する方法 注意事項 言語切替の条件分岐 言語別に表示を切り替えるには get_locale を使って、現在のロケール情報を取得して条件分岐を行います。 例えば、日本語とそれ以外の言語で表示内容を分けるには、次のコードをテンプレートに追加します。 <?php if(get_locale() == 'ja'): ?> 日本語 <?php else: ?> 他言語 <?php endif; ?> ページ冒頭の lang 設定を言語別に切り替える際には次のコードを追加します。 <?php if(get_locale() == 'ja'): ?> <html lan
CSS @supportsの知っていると便利な使い方のまとめ
CSSの@supportsは機能クエリと呼ばれ、CSSの特定のプロパティやプロパティと値の組み合わせがブラウザにサポートされているかチェックするための機能です。言い換えると、条件分岐でスタイルを適用することができます。 そんな便利な@supportsの基礎知識と実践的な使い方、そして古い使い方や実は役に立っていない使い方などを紹介します。 How @supports Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに @supportsの古い活用事例 @supportsにnotがあるけれど、常に使用するべきという意味ではない @supportsのサポートブラウザ @supportsが何の役にも立たない使い方 @supportsで遊ぶための拡張機能 @supportsのより現実的な活用事例 @supportsのロ
PHPでのデバイス分岐を簡易的に導入
モバイルの時は一覧での画像を小さいのを表示させよう！と考えた時に、デバイスの分岐が必要になった。そんなことを考えていた今日、なにやら人気記事にショートコードを利用する方法がでていました。 [WordPress]まだなら今すぐ入れたい！PC、スマホで表示を分けるショートコード ショートコード使えるのは便利だなーと思いつつも、エントリーごとで必要だったわけではないので、自分はもっと簡易な分岐を利用することにした。 WordPress 標準の関数 wp_is_mobile()WordPress には、3.4 からモバイルデバイスを分岐するための関数が導入されています。その関数を使い、簡易的に分岐させてしまいました。 PHP：簡易版分岐コード /** * Test if the current browser runs on a mobile device (smart phone, tablet
はてなブログ | 無料ブログを作成しよう
織田信長 ぼちぼち、元気にやっています。少し薬にも慣れた...んかなぁ。相変わらず食べられないけど。朝、指がこわばって文字なんて入力できなかったけど、それはほぼなくなった。関節もどこも痛くない。薬効いてきたんやろな。 で、ブログを書こうと言う気がまた起きてきた。 …
WPtap Mobile Detector がマルチサイトで動かない | 安旨ワイン探し
スマートフォン向けにテーマ切替のできるプラグイン「WPtap Mobile Detector」をインストールして設定し、うまく動いたと思っていたら、どうやらマルチサイトではうまく動かないみたい。 一つ目のサイトでは、設定画面がきちんと表示されるのだけど、二つ目以降のサイトでは、設定画面でのデバイスの追加や編集ができない(泣) せっかくうまく動いたように見えたのに・・・ Compatible up to: 2.9.4 Last Updated: 2010-5-26 となっているから仕方ないか。似たようなプラグインを探そう。 探すこと数分、「Multi Device Switcher」というプラグインを発見。 こちらは、マルチサイトでバッチリ動きました。Thingsymさんに感謝。 しかも、こんなものも発見！！ WordPressプラグイン「Multi Device Switcher」にPC/
WPtouchを卒業iPhoneに最適化されたテーマと簡単なカスタマイズ方法などwordpress | nori510.com
どーも@nori510です。 当ブログのiPhoneからのアクセスの際の表示はずっと、簡単にiphone最適化表示が出来る「WPtouch」を使ってきました。 pluginを導入するだけで簡単にiPhoneに最適化された表示になり、非常に使い勝手がよろしいのですが、色々と思うところがあり、この程WPtouchを卒業する事にしました。 iPhone最適化テーマとカスタマイズ方法など iPhone用に最適化されたテーマへの変更方法と、ちょっとだけカスタマイズの方法などをご紹介したいと思います。 が、まずはWPtouch卒業の理由。 WPtouch卒業の理由 1.唯でさえ狭いiPhone画面の横幅が、縁取りのお陰で更に狭いのが☓ 勿論文字もですが、画像が多い当ブログにとって、表示域の狭さは致命的だなと思いまして。 2.WPtouchを利用する人が多すぎるのが☓ やっぱりオリジナリティー(?)を大
Media Queriesのように、モニターサイズに応じてスタイルを変更可能にする非依存型で1KBの軽量jsライブラリ・syze - かちびと.net
シンプルで良さそうだったので一応備忘録。 Media Queriesライクにブレークポイントに 応じてスタイルを変更できるライブラリです。 非依存型で1KBと、超軽量スクリプトなので 簡単なキャンペーンサイトとかならこれでも いいかもしれないですね。 Media Queriesのようにデバイスを限定しないクロスブラウザ対応で、他のライブラリに依存せず利用出来る、圧縮版は1KBと軽量、というのが特徴です。 サイズに応じてスタイルが変わっています。何してるかというと、非常にシンプルで指定したブレークポイントに合わせて<html>にclassを付加させてるんですね。 サンプルどうぞ。 Sample ※動作確認はresponsivepxが便利です iPhoneだってOK。実機でも確認済みです。 コード <script src="syze.min.js"></script> <script>syze
[JS]複数の表示サイズごとに異なるイベントが設定できるResponsive Web Design用のスクリプト -Breakpoints.js
Responsive Web Design用に表示サイズの複数のブレイクポイントを定義し、異なるイベントを設定できるjQueryのプラグインを紹介します。 デモページ：幅640pxで表示 デモページで設定されているブレイクポイントは下記の4つです。 1024px 768px 480px 320px [ad#ad-2] Breakpoints.jsの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://xoxco.com/projects/code/b
３ステップではじめるレスポンシブWEBデザイン:phpspot開発日誌
Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。 今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルード レイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね 関連エントリ 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 HT
WordPressのURLをSSLや相対URLに変更する「wp_replace_domain」プラグイン
WordPressのページに含まれるURLを、SSLや相対URLに変更する「wp_replace_domain」プラグインを公開します。 １．機能 本プラグインの主な機能は次の通りです。 ページ内のURL（ドメイン）を指定したドメインに変更します ページ内のURL（ドメイン）を相対URLに変更します 特定のポストタイプのみでプラグインを動作させることができます 下のスクリーンショットは、httpで公開しているページに含まれる該当URLのドメインをhttpsに変更した例です。 プラグイン適用前の(X)HTMLマークアップ プラグイン適用後の(X)HTMLマークアップ 動作確認環境はさくらインターネット+WoprdPress 3.1xです。 ２．プラグインのダウンロード・インストール 以下のリンクからプラグインをダウンロードしてください。 変更履歴 2011.06.01 v0.1 初版 wp_
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js
CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。 Adapt.js - Adaptive CSS 左：ファイル名、右：スクリーンサイズ [ad#ad-2] スクリプトの制作は「960 Grid System」と同じNathan Smith氏なので、960 Grid Systemとの相性がよいのではないでしょうか。 また、対応ブラウザの表記は見あたりませんでしたが、IE6でも動作しました。 スクリプトでは、上記キャプチャのようにサイズごとに異なるスタイルシートを指定し、ユーザーの環境に合わせて最適なレイアウトで表示することができます。 下記は、同サイトをブラ
[CSS]HTML5対応、さまざまなデバイスのMedia Queriesを使ったリセット用スタイルシート -320 and up
320 and up [ad#ad-2] Media Queriesとはビューポートのサイズやカラーなどユーザーの環境ごとに異なる最適なスタイルシートを条件式のように適用できるもので、下記のようにブラウザのサイズを変更すると、レイアウトがそれに合わせて最適なものを提供できるようにすることができます。 サイトを640x480で表示したデザイン Media Queriesの詳しい説明は、以前の当サイトの記事も参考にしてください。 CSS3のMedia Queries（メディアクエリ）の使い方と実装例 [ad#ad-2] 320 and upのスタイルシートの構成 スタイルシートの構成は、最小限なものとなっています。 リセット用のスタイルシート カラー用のスタイルシート タイポグラフィ用のスタイルシート Media Queriesで予め用意されているのは、下記のサイズです。 480px 768p
[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope
プレフィックス（接頭辞）を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。 yepnope.js -A Conditional Loader For Your Polyfills! [ad#ad-2] yepnope.jsの書式 yepnope.jsの基本書式は、下記のようになります。 yepnope(resources /* string | object | array */ [, $LABchain]) css! プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。 ※「.css」で終了していない名前はJavaScriptファイルとして認識されます。 例：cachebusted.css?version=1452318 yepnope({ load
ウノウラボ Unoh Labs: PHPで暗号化・復号化あれこれ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
