これは便利！WordPressのWP_Queryでよく使うコードスニペット | それからデザイン スタッフブログ
WordPressでテーマをカスタマイズしていると、WP_Queryを用いて少し複雑な条件で投稿記事のリクエストをしたいことがあります。 例えば、物件の検索サイトなどでよくみられる「最寄駅」「間取り」「価格」といった複数の条件が一致した記事を絞り込む機能なども、WP_Queryに条件となるパラメーターを送ることで、わざわざ複雑なプログラムを自前で書かなくても、WP_Queryが一括して処理をしてくれるのでとても便利です。 呼び出したい記事の抽出条件がよほどイレギュラーでなければ、WP_Queryで大抵の条件にマッチした記事を呼び出せるのではないでしょうか？ WP_Queryは、多くの抽出条件をカバーしているだけあってパラメーターの組み合わせが豊富です。 新しい仲間とチームでWordPressのカスタマイズをすることが多くなってきたので、今回は、このWP_Queryのパラメーターをスニペット
WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ - コムテブログ
TL;DR WordPress テーマを作る時に使用頻度の高いテンプレートタグをまとめておきます。 テンプレートタグとは CMS では、html 等の骨組みにデータを流し込んで出力します。 WordPress のテンプレートタグとは、タイトルや画像・サイト URL の絶対パスなどを読み込み出力させるためのものです。テンプレートタグは自動で絶対パスやサイトの設定等を読み込むので、サイトを移行させた時も URL やパスなどを書き換える必要がなくなり便利です。WordPress テーマ作成をする時に必ず使う機能の一つなので是非覚えておきましょう。 トップページ URL 出力 bloginfo('home や template_directory')などは廃止されています。URL は以下のタグを使います。管理画面>設定>サイトアドレスの部分を出力。 <?php echo home_url(); ?
条件分岐タグ wp_is_mobile で PC とスマホの表示を切り替える方法 - Naifix
wp_is_mobile() の使い方 wp_is_mobile() は、PC とスマホで出力を切り替えるための関数です。 基本形は以下のとおり。 <?php if ( wp_is_mobile() ) : ?> <p>スマホのみ表示されます。</p> <?php else: ?> <p>PC のみ表示されます。</p> <?php endif; ?> PC 用のメニューとスマホ用のメニューを切り替えたいときなどに使えます（PC でブラウザの幅を狭くしてもスマホ用メニューを表示したくない、という場合）。 タブレットへの対応方法 wp_is_mobile() を使うとき注意しなければならないのが、「タブレットへの対応」です。 wp_is_mobile() では、タブレットはスマホと同じ扱いとなっています。 のちのち扱い方が変更される可能性もありますが、基本的に「スマホ・タブレット」と「PC」
WordPressで前の記事＆次の記事へのリンクをサムネイル画像付きで表示する方法
記事を読み終えた際に前の記事＆次の記事へのリンクを貼っておくと、他の記事も読んでもらえる可能性がグッと高まります。 サイトを訪れてくれたユーザーの滞在時間を延ばすことができたり回遊率をさらに高めることができたりと、前後の記事を読むことによるメリットは意外と侮れません。 ということで、今回はWordPressで前の記事や次の記事へのリンクをサムネイル画像付きで表示する方法を解説していきます。 サムネイル画像が付いていることにより、ユーザーがさらにクリックする可能性も高まってくるので、ぜひとも解説をもとに表示させてみてくださいね。 また、今回は賢威６.２を使用した場合を想定して解説していきますが、基本的に幅広い範囲のテンプレートで応用の効くものですので、参考にしていただけると幸いです。 前の記事＆次の記事へのリンクを表示しよう 当サイトでは、投稿記事の下部に以下のようなリンクを貼っています。
WordPressのコアファイルの仕組み。３ステップでざっくりまとめ。 - Shinichi Nishikawa's
WordPressをダウンロードすると入っているたくさんのファイル、どんな構成になっていて、それらがどんなふうに動いているのか、まずは図を見てください。 クリックして拡大してみてください。 ３ステップで理解する ステップ１：３つのフォルダをおさえる 管理画面を表示させているwp-adminフォルダ 一番馴染みの深いwp-contentフォルダ(テーマやプラグイン！) 色んな関数やapiが詰まっているwp-includesフォルダ それぞれのフォルダの中にも、かなりたくさんのファイルが入ってますが、ここはヒトカラゲにざっくり捉えます。 ステップ２：ブログのトップページが表示されるフローをおさえる ユーザがブログのトップページに訪れたときに、だいたいどんな処理が行われているのか、それが図の下半分です。 ひとつずつ読んでけば大丈夫です。 この記事の最後に、それぞれのファイルを読んでみた記事のリス
フックって？WordPressのカスタマイズ方法を説明します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはようございます。小林です。最近のレゴ®ってすごいですね。 さて、WordPressのプロフィールにHTML書きたいときありますよね、特にリンクとか。 例えば、プロフィールを以下のようなHTMLにしたいとします。 もうすぐ4歳。<br> <a href="http://www.takaratomy.co.jp/products/plarail/" target="_blank">プラレール</a>と<a href="http://www.lego.com/ja-jp/" target="_blank">レゴ®</a>が大好き。 もうすぐ4歳。 プラレールとレゴ®が大好き。 ご欄のとおり、target属性は書いても除去されてしまいます。 というのも、WordPressはセキュリティのために入力値に様々な制限をかけています。 このプロフィール欄でもそれが適用されているため、上記の様な結果にな
WordPressカスタマイズに欠かせないフィルターフックとアクションフック
カスタマイズするための仕組み WordPressにはフィルターフックとアクションフックという仕組みがあります。 これは簡単に言うとWordPressを安全にカスタマイズできるように設けられた手法です。 WordPressでWebサイトを作ったときに、必ずといっていいくらい自分の思うように表示内容や動作を変更したくなります。 そんな時、WordPressのソースコードを直接修正すると何かが影響して動作が不安定になったり、修正を繰り返すうちに元の状態へ戻せなくなるリスクがあります。 また、WordPressをアップデートすると修正部分が無くなってしまいます。 しかし、WordPressにはおおよそ修正したい部分に本体への影響がなく修正できるような仕組みを用意しています。 それがフィルターフックとアクションフックです。 WordPressをアップデートしても修正した部分は有効です。（WordPr
WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック
WordPressのカスタマイズコードでよく見かける add_filter、add_action という関数。これは WordPressのプラグイン API という仕組みを利用したもの。プラグイン API - アクションフックやフィルターフックについて、大雑把ですがまとめてみました。 WordPress を使ってWebサイトを作る時、デフォルトの WordPress の動きを変更したいなーという時が多々あります。WordPress のデフォルトの動き（WordPress Codexでは振る舞いという言い方がされています。）でよく知られてるのは、記事を書くと自動的に <p> タグが入る … とかでしょうか。とにかくそういう WordPress の振る舞いを、何とかしたい場合ってありますよね。 こういった WordPress 独特の振る舞いは、WordPress のコアファイルと呼ばれてるとこ
【Wordpress】プラグイン無しでAMP（Accelerated Mobile Pages）対応してみた。 - Qiita
【Wordpress】プラグイン無しでAMP（Accelerated Mobile Pages）対応してみた。PHPWordPressAMPAcceleratedMobilePagesワードプレス 2016年2月25日よりGoogleが開始したAMP(Accelerated Mobile Pages)プロジェクト。 巷では「アクセス速度が速くなる」「SEOに効果があるのでは？」と話が広まっていますが、今回はその概要と、実際Wordpressサイトに適用させる場合の手順をまとめます。 そもそもAMPって何？ AMPとは、Accelerated Mobile Pageの頭文字をとったもので、スマホ用Webサイトの表示を高速化する技術です。AMP対応サイトを用意することにより、Webサイトの情報がGoogle（他にもTwitter等）にキャッシュされ、ユーザーがアクセスした際にはGoogle側の
【WordPress】カスタムメニューのid・classを削除・追加｜シンプルにカスタマイズ
WordPressには、管理画面からメニューの項目や表示する場所を設定できるカスタムメニューの機能があります。 そのカスタムメニューのliタグには、id・classの値がデフォルトでいくつか指定してありますが、その値が多いと感じる場合があるかもしれません。 今回はそのような場合に、id・classの値を削除・追加して、シンプルにカスタマイズする例となります。 カスタムメニューのid・classの値をシンプルにカスタマイズする例今回の例では、カスタムメニューのliタグにデフォルトで設定されているid・classの値を削除し、現在のページのliタグにcurrentが値となるclassを追加します。また、管理画面からメニューにclassを設定した場合は適用されるようにします。 管理画面からメニューにclassを設定する方法については、以下のリンク先を参考にしてみてください。 idをカスタマイズ｜
WordPressのテーマカスタマイザーにオリジナルの項目を追加する方法 | UNORTHODOX WORKBOOK | Blog
WordPressのテーマカスタマイザー（テーマカスタマイズ画面）にオリジナルの項目を追加して、入力内容をテーマに反映させる方法です。 オリジナルの項目を追加すると、テンプレートファイル側に記載したくないもの（広告や解析タグ等）を管理画面上から簡単に設定でき、プラグインを使うまでもないようなちょっとした表示の設定に大変重宝します。 頑張ればすごいものができそうですけど、ここでは単純に「テーマカスタマイザーへオリジナルの項目を追加」し、「表示するかしないか選択できるチェックボックスを設置」して、実際に「テーマ（サイト）へ反映」させる方法を記載します。 以下、テーマカスタマイザーだったりテーマカスタマイズだったりカスタマイザーだったりと表記揺れがありますが、同じものと捉えていただければと思います。 テーマカスタマイザーとは テーマカスタマイザーは、WordPressの管理画面上からテーマの変更
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
WordPressサイトの引っ越しやバックアップがとれるプラグイン「Duplicator」 – ワードプレステーマTCD
WordPressで運用しているサイトをほかのサーバに引っ越しをしたり、あるいはテスト用に別の環境にコピーするのは意外と骨が折れる作業です。データは何とか移したものの、重要なプラグインが入ってなかったり、テンプレートも移してなかったりなどなど、やらなければならないことが多いことに気がつかされます。 そこでオススメしたいのが、「Duplicator」というWordPressのプラグインです。これを利用すると、記事だけではなく、テンプレートやプラグインも含めて、まるごとそのままほかの環境にコピーできます。 「Duplicator」とは 「Duplicator」はサイトの引っ越しやバックアップがとれるWordPressプラグインです。 無料版でも引っ越しやバックアップは可能。 元サイト→新サイトへの引っ越しが可能 バックアップデータを取ることも可能 WordPressダッシュボードの左メニュー（
WordPressにアンケート設置！WP-Polls使い方と日本語化！ | 自作PCテクニカルセンター
WordPressにアンケート設置！WP-Polls使い方と日本語化！2014年10月15日 [WordPress] WordPressブログを運用していて、アンケート機能を使ってみたいと思ったことがあります。 投稿した記事のちょっとしたスペースに設置なんてできたら便利ですよね。 そんなユーザの願いを叶えてくれるプラグイン「WP-Polls」のご紹介です。 アンケートページを作れる！WP-Pollsの特徴！一番の魅力はとても簡単にアンケートを作ることができる点ですね。 アンケートの質問内容を決めて、あとは選択肢を好きなだけ用意して、作成するだけです。 記事中にアンケートを設置できますが、ウィジェットにも作れるんです。 WP-Pollsをインストールしよう！WordPressの管理画面のプラグインから「WP-Polls」を検索します。 そのままダウンロードし、インストールを行なって下さい。
WordPressで複数のループを使ってカスタム投稿一覧を自在に表示する方法
サブループを使えば、多様な情報を表示するポータルサイトも簡単に作れます 複数ループの制御までくるとワンタッチで使えるプラグインは用意されていません。カスタマイズするには基本的なPHPの知識が必要になります。 そもそも記事の表示だけならメインループだけで実現できます。おそらくこのページの情報が必要になるのはWeb業界の人だと思います。 Codexを何十回も読み返しながら書く、解説の解説みたいな記事なので専門知識のある方にはくどいかもしれません。 ご了承下さい。 2015年3月追記：この記事は古い内容を含んでいます。「新しいループについての投稿はこちら」をご覧ください。 ループについて更に詳しく解説 前回に続き、ループでどんな動作をしているかを更に詳しく見てきます。この仕組を理解しておくと後の説明もすぐに飲み込めるようになります。 ループ処理の順序 1.WordPressはまず動作するのに必要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット
Plusers
用語集 - WordPress Codex 日本語版
WordPressカスタマイズ事典
