記事内の画像をクリックして拡大表示する機能は、ワードプレス標準にもありますが、もう少しスタイリッシュに、あるいは、もう少し使いやすくしたいという場合、便利なプラグインがあります。 特徴画像ファイルに限らず、動画やPDFもクリックで拡大表示をポップアップさせることができます。 テキストリンクからも可能なので、画像を差し込むと崩れがちなテーブル内にも「テキスト」表示して拡大画像へリンクする場合にもポップアップ表示できればスマートに実現可能です。 メディアに限らずインラインコンテンツからもポップアップ可能です。 インストール～設定プラグインの新規追加から、「Easy FancyBox」を検索してインストール、有効化します。 ↓カーソルを載せると右上にCopyボタンが出ます。 Easy FancyBox メディア設定設定の「メディア」から設定します。 画像サイズの設定はワードプレス標準のメディア設

一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用

WordPressを色々いじって行くと必ず「トップページではサイドバーなし」で、「固定ページや個別投稿ページではサイドバーを表示」と言った感じで現在のページに応じて処理を変えたくなってきます。そこで登場するのがWordPressの「条件分岐タグ」。 トップページや個別投稿ページを判別して処理を分けられるのはもちろんですが、現在見ている端末がモバイル（スマホ・タブレット）かも判別できたりとても重宝します。 「条件分岐タグ」はかなりたくさんありますが、よく使うものはある程度絞られてきます。今回は「これだけは覚えておきたい！」という条件分岐タグをまとめてみました。 条件分岐の基本的な書き方 WordPressはPHPを使ったCMS（コンテンツマネジメントシステム）ですので、条件分岐自体はPHPで書きます。そして条件分岐を指定する際に、WordPress独自の「条件分岐タグ」を使う！と覚えておきま

img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>

CSSやJavaScriptの読み込みはSTYLEタグやSCRIPTタグをheader.phpなどに直接書くこともできますが、WordPressではfunctions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックを使って読み込むことが推奨されています。wp_enqueue_style()やwp_enqueue_script()を利用する利点として、CSSやJavaScriptの重複読み込みを回避できたり、functions.php内で一元管理できることなどが挙げられます。 ファイルをキューに登録する関数 wp_enqueue_style() – CSSファイルをキューに登録wp_enqueue_scripts() – JavaScriptファイルをキューに登録 wp_enqueue_script関数 wp_enqueue_scrip

Result SVG等を使わず、純粋にCSSだけで白抜き文字を作る、みたいなやつ 縁取りだけならtext-shadowやtext-strokeで済みますが上のデモのような白抜き文字だとSVGが主流になっていると思います SVGが使えないケースはblend-modeより少ないと思いますが選択肢があると良いなという事で メリットはコード書くのが楽、デメリットはblend-modeな点でしょうか css.label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 25px; border-radius: 35px; font-size:2.5rem; font-weight: bold; } .label.style { background: #fff; colo

どうも、Dスケです。 ブログを書くうえで、写真や図版を使って分かりやすく説明すると、読む人にも伝わりやすく、文字ばかりの記事よりも楽しく読んでもらえて良いですよね。 ただ、画像を挿入する際に、「アップする画像のサイズは調整した方がよいのか？」「このサイズで読む人はちゃんと画像が見えているのか？」など、悩むことはありませんか？ 数枚だけ使用する記事なら都度サイズ調整してもよいかもしれませんが、10枚以上になってくるとさすがにシンプルな作業で工数を減らしたい。。。 そんなときに使ってほしいWordPressのプラグイン、「WP jQuery Lightbox」をご紹介します！ WordPressで画像アップロードの際に気になること 「WP jQuery Lightbox」を紹介するその前に、日頃WordPressでブログに画像をアップロードする際に、個人的に気になっていることを書き出してみたい

PinterestはPin止めできるピンボードのようなウェブサイトです。 WordPressでPinterest風グリッドレイアウトを実現する方法をご紹介いたします。 Pinterestはイベントだったり写真だったりお気に入りをピンしていくことであなたのコレクションを作ることができますが、ここではとりあえず投稿をグリッドレイアウトをする方法を解説したいと思います。

ちょうどクライアントワークで関連記事を表示させたいという要件があり、色々と調べていく中でAdvanced Custom Fieldsプラグインを使うのが便利というのを知りました。今後も使うケースが出てきそうということで、備忘録に残しておき…

ワードプレスでカスタムフィールドの作成にAdvanced Custom Fields（以下ACF）を使用している方は多いと思います。長ったらしいカスタムフィールドのコードを書かずに済む、とっても便利なプラグインですよね。 選択タイプのカスタムフィールド（セレクトボックス・ラジオボタン・チェックボックス）に、ACFのフィールド作成画面から直接選択肢を設定するのではなく、変数などを入れたいと思った事はないでしょうか。 今回は、ACFの選択系フィールドに変数などを取り込んで、選択肢を動的に設定する方法です。 今回やりたい事 ちょっと伝わりづらいかもしれませんので書いておきますが、今回やりたい事は以下のような事です。 たとえば、サッカー教室のサイトがあったとします。 カスタム投稿タイプ「教室」と、カスタム投稿タイプ「先生」があります。 「教室」の編集画面に「担当の先生」というセレクトボックスを作り

EC-CUBE Advent Calendar 2020 2日目の記事です。 制作中のテスト購入で、受注したデータなど削除して初期化状態にする手順メモ（初心者向け）になります。 受注データをまとめて初期化状態にするものなので、削除の際は注意してください。 受注に関わるテーブル データベースの各テーブルの一覧を参考に受注に関するテーブルを把握。 受注に関わるテーブルは以下になります。 dtb_order_item　 #注文商品の個別明細 dtb_mail_history #受注メールの履歴 dtb_shipping #注文の配送先情報 dtb_order #注文 phpMyAdminで以下のSQL文実行 EC-CUBEのデータベースを選択し、SQLタブ切り替えします。 以下のSQL文を入力実行してください。 該当テーブルのデータ削除と受注IDを１に戻す処理になります。 delete from

JavaScriptでのGutenbergのブロック作成の知識がなくても「Block Lab」を使えば簡単に作成できるので、サクッとオリジナルなブロックを作りたい方はぜひ使ってみてください！ #wctokyoで教えてもらった「Block Lab」が凄い…！ コード書けなくても管理画面からブロック作り放題です。 使い方のイメージ的には「Advanced Custom Fields」のブロック版みたいな！ pic.twitter.com/BceRc089If — はにわまん (@haniwa008) November 4, 2019 Block Labのインストール プラグイン → 新規追加 → キーワード「Block Lab」 → 今すぐインストール → 有効化 インストールされると左側に「Block Lab」のメニューが登場します。 Block Labの使い方 「Example Block

こんにちは！フリーランスエンジニアののせっち@nosecchi01です。 ワードプレスのサムネイル（アイキャッチ）をbackground-imageで使う方法をご紹介します。 コードをコピペするだけなのなら一瞬で終了します。 というわけで、早速コードを紹介 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo '<div style="background-image: url('. $url.')"></div>'; the_post_thumbnailは<img>タグを返しますが、どうしてもbackgroundでいきたいときがありますよね。 →urlを取得してあげればOKです。$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID)

不動産専門ホームページ制作会社で働くエンジニアのブログです。日々、業務の中で得られた知識や技術、時々はプライベートなネタも投稿していきます。 menu アイキャッチ画像を表示、取得できる関数WordPressのアイキャッチ画像をユーザー側に表示したり取得できる関数をまとめました。 URLのみを取得したい場合やimgタグ付きで出力したい場合など、 案件によって処理が異なる場合も多々あります。 良ければ、こちらの記事を参考にしてみて下さい。 因みに、 アイキャッチを扱う場合には以下の様な関数が用意されています。 the_post_thumbnail() get_the_post_thumbnail() the_post_thumbnail_url() get_the_post_thumbnail_url() wp_get_attachment_image_src() the_post_thum

Faviconジェネレーターは、ブラウザ上で、JPEG, PNG, GIF などの画像ファイルから favicon 用の画像(favicon.ico)を生成・変換するサービスです。透過、マルチアイコン、各種サイズに対応しています。変換はすべてローカルで行われ、高速に変換できます。

ACF テキストフィールド <?php the_field('text'); ?> ACF テキストエリア <?php the_field('textarea'); ?> ACF ラジオボタン <?php // vars $field = get_field_object('color'); $value = $field['value']; $label = $field['choices'][ $value ]; ?> <p>Color: <span class="color-<?php echo $value; ?>"><?php echo $label; ?></span></p> ラジオボタンによる分岐 <?php if( get_field('ラジオボタンのフィールド名') == "選択肢名1"): ?> <p>処理1</p> <?php elseif( get_field('