XServer主催のWordPress実践力向上セミナー#2「制作現場から学ぶ!ブロックテーマ勉強会」に登壇させていただいたときの資料です。 https://xserver.connpass.com/event/355480/ 「“ブロック”で作る、WordPress制作フロー変革のすすめ」…

本記事は広告が含まれる場合があります WordPressプラグイン Advanced Custom Fieldsの使い方・出力関数【WordPress カスタムフィールド】 WordPressでカスタムフィールドを利用する際、簡単なものであれば標準のカスタムフィールドでも十分です。 しかし、カスタムフィールドを運用する際に、画像や文字数制限や必須設定など、標準機能よりより高度な設定をしたいシーンがよくあります。 そういった場合に、今回紹介する「Advanced Custom Fields」というプラグインを利用すると、より高度なカスタムフィールドを運用することができます。 本記事では、Advanced Custom Fieldsの使い方や主要な出力方法について解説していきます。 最新のAdvanced Custom Fieldsについて 2024年10月15日現在、Advanced Cus
Advanced Custom Fields(ACF)は、ブログ記事や商品ページなど、特定の情報を入力する必要があるときに便利なプラグインです。 基本的な使い方はこちらでご紹介したので、今回はACFの出力方法をご紹介します。 ACFの専用関数とは Advanced Custom Fields(ACF)の公式ドキュメント(ACF Documentation(英語))に書かれているBasic Functionは、カスタムフィールドで入力されたデータを取得し、WordPressのテーマやプラグイン内で使用するための基本的な関数群です。ACFの関数には、次のようなものがあります。 get_field(): 特定のカスタムフィールドの値を取得します。この関数は、カスタムフィールドの名前を引数として受け取り、そのフィールドの値を返します。各フィールド・タイプは異なる形式のデータ(文字列、配列など)を返
情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。 ブロックエディターでAdvanced Custom Fields を使用したい場合、プロ版のACF Blocks を使えばブロックに登録できるが、決まったレイアウトでページを作成したい場合はクラシックエディターのほうがやりやすい。 ブロックエディターを全く使用しない場合はAdvanced Editor Tools で設定、またはClassic Editor をインストール。 投稿タイプによってブロックエディターを不使用にしたい場合は関数で設定するか、Disable Gutenberg で設定。投稿タイプ・ユーザー・投稿IDなどでオフにできる。 Disable Gutenberg
Smart Custom Fields プラグインは開発を終了しクローズされることが発表されています。過去数バージョンにおいてテストも実施されておりませんので、利用は推奨しません。(6.4.4 で検証済みと表示されますが外部より指摘があった脆弱性対応を最低限行っただけです) 代替プラグインの候補としては以下のようなものもあります。 Advanced Custom Fields Custom Field Suite (公開停止) Pods 多くの方が WordPress でウェブサイトを作る際に、必要に応じてカスタムフィールドを活用して、独自の入力フォームと値を投稿や固定ページ、カスタム投稿に持たせるといった対応をされたことがあるかと思います。 その際によく利用されるプラグインとして代表的なものは、 Advanced Custom Fields Smart Custom Fields かなと
使用環境 win7 XAMMP v3.2.1 HTMLファイル内でPHPを使う XAMPPのデフォルト状態では、HTMLファイル内でPHPを実行することはできません。 \xampp\apache\conf\httpd.conf ファイルをテキストエディタで開きます。 <IfModule mime_module>~</IfModule> のタグ内に AddType application/x-httpd-php .php .html と記述します。 ファイルを保存してXAMPPを再起動します。 Startをクリック→Stop→stopをクリック→start でOKです。 絶対パスの指定 headerやfooterなど、ページで共通して使うパーツはcssや画像を絶対パスで書いています。 htdoctsの下階層にtestディレクトリを作ったとします。 http://localhost/test/
まとめ Googleスライドやそのテンプレートを作る人は、ページ設定から解像度を上げよう そうすると、Speaker Deckにアップロードするときなどに画像や文字の品質が上がる 本編 Googleスライドを新しく作成するとき、自然とアスペクト比が16:9の設定になっているかと思いますが、これが実際にどのぐらいのサイズなのかを気にしたことはありますか? そもそも、Googleスライドの縦横サイズは、ファイルメニューの中にある「ページ設定」で確認・変更することができます。 デフォルトだと以下の通り「ワイドスクリーン(16:9)」になっているのですが、ここから「カスタム」に変えて単位も変えてみると、「ワイドスクリーン(16:9)」というのは960*540pxであることがわかります。現代でもデフォルトがFull HDになっているわけではないのです。 画面に映してスライドショーをする分にはこの設定
よくネットにいる人たちは「アイツラのモチベがすごい」という点にばかり着目しているようだが、はっきりいうがモチベーション自体は他と大差ないと思う。 もうちょっと言うなら、ジムなんか行きたくねーし資格の勉強なんかだりーし、何ならとっとと帰って適当な飯食って動画見てとっとと寝たい、そこが本当に正直なところだと思う。 ネットでぐちゃぐちゃと出来る人を斜めに見て「あぁ、彼らは私達と違って常人には持ち得ないほどに強いモチベーションがありますから」とか言っているお前らは、見てるポイントが全然違うって言うことを言っておこう。 お前らは自分を常人とか思っているようだがそんなことないからな。 出来る人たちは「やりたくないけどやる」ということになれている理由は様々なのだろうが、お前らが何でもかんでも理屈っぽく考えてでも失敗したらああだとか、やったところでどうせこうだとか、やりたくない自分がどう客観的に見て正しい
画像を渡して「クリエイティブ制作」の相談に乗ってもらう画像をアップロードしたり、撮影したスクリーンショットを渡したりすることで、その画像についてCopilotに質問もできます。 たとえば、作成中のスライドのスクリーンショットを渡して、レイアウトについて相談すると、画像の内容に即した構成を提案してくれます。 image:Microsoftまた、自分が撮影した写真をアップして もっと奥行きがある感じを出したいんだけど、どう撮影すべき? と質問すれば、撮影の具体的なアドバイスをもらえます。 言葉だけでは説明できない疑問や困りごとにもすぐに答えてもらえるので、制作物のクオリティアップにつながるはずです。 キャリア相談は「AIに質問してもらう」この先のキャリアで迷ったときは、Copilotにコンサルタントになってもらうのがオススメ。 LinkedInなどに自分のキャリアについてのプロフィールがまとま
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
凝りに凝ったピクセルアートが特徴のRPG「Orangeblood」を手がけたGrayfax Softwareが2025年5月19日(月)に、ドット絵の美少女キャラクターが銃を撃ちまくる2D横スクロールアクションゲーム「Nitro Express(ナイトロ エクスプレス)」をリリースしました。自律型ドローンが普及した架空の日本の都市を舞台に、装弾数無限の銃とグレネードで暴走マシンを制圧する新作ゲームが気になったので、実際にプレイしてみました。 Nitro Express(ナイトロ エクスプレス) | Game | PLAYISM公式サイト https://playism.com/game/nitro-express/ Steam:Nitro Express(ナイトロ エクスプレス) https://store.steampowered.com/app/3088250/Nitro_Expres
writer profile Takuryu Yamada 山田卓立 やまだ・たくりゅう●エディター/ライター。1986年生まれ、神奈川県鎌倉市出身。海よりも山派。旅雑誌、ネイチャーグラフ誌、メンズライフスタイルメディアを経て、フリーランスに。現在はキャンプ、登山、落語、塊根植物に夢中。 世の中にこれだけネット販売が充実していても、 アンテナショップにはそこでしか手に入らない商品が数多く販売されている。 現地以外では、アンテナショップにしか流通しない“幻のローカルフード”を求めて、 店舗に列をなし入荷日のうちに即完売、という商品も少なくない。 今回は数ある商品のなかから、選りすぐりの数量限定・即完売商品を紹介しよう。 レインボーラムネ┃奈良まほろば館@新橋 奈良県生駒市生まれの「幻のラムネ」といわれる〈レインボーラムネ〉。 ふるさと納税の返礼品として登録されたものの、 人気のあまりわずか8
「情報過多」の時代、インプットした情報を活用するのはもちろん、時にはうまく情報を整理することも求められます。人材育成トレーナーや経営コンサルタントとして活動する「思考の整理家®」の鈴木進介さんは、そうするための方法として「ノートに書く」ことをすすめます。そのメリットは、どのような点にあるのでしょうか。 構成/岩川悟 取材・文/清家茂樹 写真/石塚雅人 【プロフィール】 鈴木進介(すずき・しんすけ) 1974年12月28日生まれ、大阪府出身。思考の整理家®。株式会社コンパス代表取締役。人材育成トレーナーや経営コンサルタントとして活動中。大学卒業後、IT系企業や商社を経て25歳で起業。ライバルに知能・経歴では負けてもアドバイスのわかりやすさで勝負すべく、「誰でも簡単に実践できる」思考の整理術を研究。独自の思考の整理術を駆使して上場企業を中心にクライアントを獲得。支援した企業は100社以上、研修
米Googleは5月20日(現地時間)、年次開発者会議「Google I/O」をハイブリッドで開催した。例年通りスンダー・ピチャイCEOの挨拶で始まった約2時間の基調講演は昨年同様ほぼAIモデル一色で、「Gemini」という単語は95回、「AI」は92回発せられた。 本稿ではこの基調講演で発表されたことを簡単にまとめる。なお、開発者向け基調講演は別途行われており、技術的な詳細はそちらで発表された。 ピチャイ氏は、GoogleのAIへの取り組み、特にGeminiの進化について説明した。「Gemini 2.5 Pro」がコーディングベンチマークでトップになったことや、「TPU Ironwood」などのAI向けのGoogleのインフラの強みを強調した。また、同社のAI製品が広く普及していることにも言及し、同社の数十年間の研究の成果が世界中の人々にとって現実のものとなっている新しいフェーズにあると
CSSの新機能「@scopeアットルール」。このルールを使えば、CSSセレクターに適用されるスタイルのスコープ(範囲)をHTMLの特定の一部分に限定できます。さらに、その開始点(ルート)や終了点(リミット)も柔軟に設定できます。 この記事では、CSSのスコープを制御できる@scopeの基本的な使い方や注意点を解説します。 @scopeを使用すると、以下のようなメリットがあります。 クラス名を複雑にしなくてすむ スタイルの衝突を防ぎやすくなる 保守性が高まる .titleや.buttonなどのよく使うクラス名も、スコープごとにスタイルを分けられます。その結果、複雑なクラス名を増やさずにすみ、意図しないスタイルの上書きも防ぎやすくなります。また、スコープを設定することで影響範囲が明確になり、あとからスタイルを修正したり追加したりしやすくなります。 @scopeの使い方は大きく2通りに分けられま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く