はてなブックマーク

これまではフレームワークっぽい仕様の CMS を設計するときは、「この部分に表示されるテキストはこのカスタムフィールドを使う」というような一方通行な設計になりがちだったのですが、この間なんとなく参加した WordCamp Tokyo 2017 で聴いたセッションで、投稿画面でカスタムフィールドを自由に生成して並び替えたりしていて、これはマネしなくてはと思いました。 そのセッションではフレームワークを使っていて導入が大変そうだったので、似たような機能を探したら Advanced Custom Field Pro に付いている『Flexible Content：柔軟コンテンツ』というアドオンで似たようなことができると分かりました。 ページビルダー系プラグインとの比較 カスタムフィールドのように管理画面からページを作成するのではなく、デザインが適用されたページでコンテンツを作成していく WPBa

横浜のホームページ制作会社DOEはサイトリニューアルやサイト更新のご依頼を承っております。 DOEは神奈川県の会社ですが、神奈川以外のWeb制作実績も豊富です。 品質が高くリーズナブルな価格でホームページ制作のおすすめプランをご案内いたします。是非お気軽にお問い合わせください。

Summaryカード TwitterではSummaryカードを設定することで、Twitter上での記事のプレビューを設定できます。 Facebook sample https://www.facebook.com/sharer/sharer.php?u=###url### OGP設定 OGPを設定することでFacebookでリンクをシェアしたときのプレビューを設定できます。 OGPを設定するためにはFacebook Developersでの新規アプリの作成と、metaタグの設定をします。 参照：Open Graph story - シェア機能 OGP設定はFacebook以外でも有効になる場合があるようです。（Google+、Linkedin等） Google+ ※Google+ は2019年にサービス終了しました。 sample https://plus.google.com/share

get_terms関数を使ってカスタムタクソノミーのリストを表示させることがしばしばあると思います。 そのリストを任意の順番で並べ替えたい（ソート）ときは、カスタムタクソノミー設定時の「説明」に番号を振っていくことで実現することができます。 図のように東京の説明に000、神奈川に001等を設定し、任意の順番でソートをかけることができるようにできます。ただし次のコードでは動きません。 $terms = get_terms($taxonomy, array( 'parent' => 0, 'orderby' => 'description' ) ); ソートが効くようにするために、WordPressフォーラムにあるように次のようなコードをfunctions.phpに追加する必要があります。 function taxonomy_orderby_description( $orderby, $ar

参考 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ロールオーバーは考えない スマホサイトはオンマウスによってhoverやロールオーバーの効果が使用できません。 jQueryなどを用いてタップした時にボタンの色を変える演出は可能です。 画像表示 CMSの利用でPCサイトで使う画像をそのままスマホサイトにも使用せざるを得ない時、幅が画面をはみ出してしまうのを回避する為、下記をCSSに記載します。 img { max-width:100%; height:auto; } 画像は写真以外はどんどんPNGを使用する スマホは問題なくPNGが表示される上に、PNG-8であればGIFよりも軽く書き出すことができる。 アイコンなどの画像は倍のサイズで作成しているはずなので、コーデ

制作したホームページをお客様に納品する際に、固定ページはカスタムフィールドだけ表示させたかったのですが、エディター部分を非表示にする方法がなかなか見当たりませんでした。 以下の方法を使えば【スタイルシート】によりエディター部分を非表示にすることができます。 方法は以下コードをfunctions.phpに追加するだけです。 function post_output_css() { $pt = get_post_type(); if ($pt == 'page') { //投稿の場合はpost $hide_postdiv_css = '<style type="text/css">#postdiv, #postdivrich { display: none; }</style>'; echo $hide_postdiv_css; } } add_action('admin_head', 'po

カスタムフィールドに画像を登録すると、基本的にはその時点で4種類のサイズの画像が保存されます。 WordPressの管理画面『設定＞メディア』で設定していた3種類のサイズと、カスタムフィールドに登録した画像そのもののサイズです。 サムネイルのサイズ 中サイズ 大サイズ フルサイズ（登録した画像の元の大きさ） 上記、上から3つの画像サイズは自由に設定できます。 例えば次のような設定が可能です。 サムネイルのサイズ：100 × 100 中サイズ：300 × 300 大サイズ：700 × 700 フルサイズ（登録した画像の元の大きさ） 事前に生成されていないサイズの画像を表示したい ここで、カスタムフィールドに設定した画像を、上記のいずれのサイズにも当てはまらないサイズ、例えば『200 × 200』で表示させたい場合はどうすれば良いでしょうか？ スタイルシート、もしくはimgタグにサイズを記述し

WordPressのマルチサイト機能を使用すれば、複数のブログを効率よく管理できます。 特に、似たようなデザインのサイトが複数ある場合は、『子サイト』を作成することで、親サイトのデザイン（テンプレートやスタイルシート）を引き継ぐことができるため大変便利です。 しかし、例えば『header.php』に関しては親サイトと若干デザインが異なる場合などはどうすれば良いでしょうか？ ２つの選択肢があります。 親サイトのheader.phpを引き継がず、子サイト専用のheader.phpを用意する 親サイトのheader.phpの中で条件分岐させる 基本的なレイアウトが同じであれば上記(2)の方法のほうが管理的にも優れていると思います。 今回は、この条件分岐の方法について説明します。 『ブログのID』を取得して条件分岐 条件分岐させるためにはまずブログのIDを取得する必要がありますが、それはWordP

Advanced Custom FieldsはWordPressでカスタムフィールドを利用するときに必ずインストールしているプラグインです。ただ、このカスタムフィールドの値でソートをかける方法が意外と見当たらなかったので苦労しました。 分かれば単純なのですが、以下の記述でOKです。 $args = array( //ソート 'orderby' => 'meta_value', 'meta_key' => 'e_date', //ここにソートの対象となるカスタムフィールドの名前を入れる！ 'order' => 'DESC' ); $my_query = new WP_Query( $args );

一般のホームページ制作会社では制作後、大した確認をせずに納品してしまうケースがあります。その結果「リンク切れ」「不十分なスペース取り」「別のブラウザでの表示エラー」「不十分なSEO対策」「使いにくいCMS」「コピー＆ペーストミス」等でお客様に不満が残ってしまう場合があります。 DOEでは納品を行う際に下記の項目を必ずクリアするようにマネジメントしておりますので安心です。

WordPressを導入しているホームページでマルチサイトを使用していて、『Ａブログ』に、『Bブログ』の投稿内容を表示させるパターンはよくあり、『switch_to_blog』を使用すればほとんどの場合問題なく『Bブログ』の内容を引っ張ってくることができます。 しかし、wp_query等の引数に『カスタムタクソノミー』を与えて投稿内容を絞り込むようなケースが動作しないことがありました。 WordPressのバージョンは【3.8.2】でした。 【サンプルコード】 <?php switch_to_blog(2); $arg = array( 'posts_per_page' => '3', 'tax_query' => array( 'relation' => 'AND', array( 'taxonomy' => 'example_taxonomy', 'field' => 'id', 't

カテゴリの一覧を出力したいときに、一番簡単なのはwp_list_categoriesだと思いますが、この関数はシンプルにリストタグ<li>でカテゴリの数だけループして出力するだけです。 もちろん引数で各種設定はできますが、細かなことはできません。 例えばカテゴリによってどんなアイコンを表示させるだとか、<li>の中に複雑なHTML要素を入れたい場合などはwp_list_categoriesだけでは対応しきれません。 get_categoriesでカテゴリのリストを自由自在に。 そこで登場するのがget_categories関数です。 get_categoriesは実はwp_list_categories関数の内部で使用されています。つまりwp_list_categoriesは、get_categories関数を元にして、最終的にシンプルなリストタグを出力しているだけなのです。 従って少し複

ループ内などで、自分のカテゴリに加えて親カテゴリの情報を表示したい場合があると思います。そのようなケースでは以下のようにget_the_category()とget_category()をうまく使えば情報を取得することができます。 <?php //現カテゴリの配列を取得する $cat=get_the_category(); $cat=$cat[0]; //親カテゴリがあるか if ($cat->category_parent) { //category_parentは親カテゴリの「ID」 //親カテゴリの配列を取得する $parent_cat = get_category($cat->category_parent); /*ここでget_the_category()を使わないのは、get_the_categoryは引数を取らないから。任意のIDのカテゴリ情報を配列で取得するにはget_ca

以下はカテゴリに対してカテゴリ名などのアイコン画像をカスタムフィールドで登録している前提で、そのカスタムフィールドの値を取り出すためのサンプルです（ループ内です）。 <?php //カスタムフィールドを読み込むために、カテゴリIDを取得 $cat=get_the_category(); $cat = $cat[0]; $catid=$cat->cat_ID ; $post_id = 'category_'.$catid; /* category_4 のような値をゲットしたい */ ?> <?php $attachment_id=get_field('category_icon_large',$post_id); echo wp_get_attachment_image($attachment_id,'full'); ?> 「get_field」を使用する際引数に、$post_idとして値を

WordPressのテーマをいろいろいじっていると、「あれ、このページにはどのテンプレートファイルが当たっているんだ？？」と分からなくなることがあります。 そんなときはどこかに以下のコードを貼り付けて確認しましょう。 <?php global $template; $template_name = basename($template, '.php'); echo $template_name; ?> 私はfooter.phpに貼り付けておき、普段はコメントアウトをしておいた上で、調べたい時だけコメントアウトをはずすようにしています。

WordPressの子テーマを使ってこのブログを構築していた際、子テーマの中の「images」ディレクトリを参照したかったので何も考えず「boginfo(‘template_url’)」で参照しに行ったところ、親テーマのimagesディレクトリの中を見に行ってしまっていました！ 子テーマのテンプレートでは、親テーマのディレクトリを見に行く書き方と、子テーマ自身のテーマディレクトリを見に行く書き方は分ける必要があるのです。 ちなみに親テーマのフォルダは上述の通り「boginfo(‘template_url’)」で見に行けますが、これも非推奨の記述のようです。 まとめると以下が正しい記述方法になります。 ややこしいですね。 ●子テーマから親テーマのテーマディレクトリを見に行く場合 <img src="<?php bloginfo('template_url'); ?>/images/sampl