WordPressのプラグイン・ACF Extendedの充実した機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はいさい！ エンジニアのうーまーです。沖縄からフルリモートでLIGでお仕事しています。 今回は、WordPressのカスタムフィールドプラグインとしてデファクトスタンダードなACFを拡張する、ACFのアドオンプラグインのご紹介です。 ACFはそれだけで神的な存在ですが、たまに「こういう機能もあったらいいなー」と思うこともあります。そういうかゆいところに手が届くようにしてくれるのがこのACF Extendedです。 機能があまりにも多すぎてすべては紹介しきれないのですが、個人的にすごいと思う機能をいくつかピックアップして紹介したいと思います。 ACFとは？その拡張とは？ Advanced Custom Fields (ACF) とは、WordPressの投稿ページや固定ページ、カテゴリ、コメント欄など任意の箇所へ入力欄を追加できるWordPressの追加機能（プラグイン）です。 テキストや画
非エンジニアのディレクターも知っておきたいACFの基本【初心者向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのリリィです。 今回は、非エンジニアのディレクターでも知っておきたいACFの基本について、学んだことを書いていきます。 「自分はエンジニアじゃないからよくわからない」とか、「エンジニアさんからカスタムフィールドが……って言われてもイメージがつかないんですが……」などと内心思ってる皆様、ぜひご参照ください。 ACFとは？ 当然のように出てきましたが、そもそもACFってなんでしょう？ 正式名称はAdvanced Custom Fieldsという、WordPressのカスタムフィールドを使用できるプラグインです。 LIGブログでも幾度となく取り上げられている（検索してみたらざっと40件弱あった）、知っている人には超有名プラグインですね。 カスタムフィールドとは カスタムフィールド（Custom Fields）は、 WordPress に標準で用意されている編集機能の一つで
【超簡単】WPでブロックエディタを自作できる、ACFとは？手順も解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！「御徒町」を「つれづれまち」と読んでいたバックエンドエンジニアのまうみです。 今回はみんな大好きなWordPressプラグイン「Advanced Custom Fields PRO」（以下、ACFと省略）を使った、自作ブロックエディタの設定方法を紹介したいと思います。 ブロックエディタを自作する方法はいくつかあります。しかし、Reactの知識やjsをbuildするための環境構築が必要ですし、WordPressの実装経験がある方でも、ハードルが高い印象を受けるかもしれません。 また、WordPress本体のアップデートに合わせてメンテナンスをしていく必要もあります。いくらブロックエディタ自体の利便性が良くても、制作やメンテナンスにコストがかかるのは極力避けたいですよね。 そういったハードルをACFを使用することで解決し、簡易的にブロックエディタを開発することが可能です。ゼロからブ
【WordPress】ブロックパターンおすすめのプラグイン | バシャログ。
こんにちは。koyaです。 テレワークを機に自宅を引っ越しました。 自宅にいる時間が長くなると広い部屋が欲しくなりますよね。通勤時間を気にしなくていいので物件探しも幅が広くてよかったです。 OculusQuestやSwitchを所持していても狭い部屋だとやれることが限られていたのでとても快適です。 今回はWordPress5.5で追加された「ブロックパターン」を使う上で外せないと思っているプラグインの紹介をします。 そもそも「ブロックパターン」とは？ カスタムフィールドで言う繰り返しフィールドのようなもので、事前に設定した複数のブロックを一括で呼び出すことができます。 似たようなページを複数作る際に、同じブロックを何度も組む必要性が無くなるので非常に便利です。 ブロックパターンのオススメプラグイン Custom Block Patterns こちらのプラグインを使用することで、記事作成と同
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。
こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc
Elementor Page Builder - こだわったコンテンツを作成できるWordPressプラグイン MOONGIFT
ブログはついテキストが多くなってしまいがちです。そもそもWYSIWYGなエディタ部分において画像の埋め込みと文字装飾くらいしかサポートされていないのが原因でしょう。もっと凝ったデザインをしたいと思っても、HTMLを直接編集するしかなくなります。 そこで使ってみたいのがElementor Page Builderです。WordPress上でドラッグ&ドロップによるコンテンツ編集が実現します。 Elementor Page Builderの使い方 設定ページです。固定ページ、投稿、メッセージで利用できます。 編集画面に Elementorで編集 ボタンが追加されます。 これが編集画面です。左側のコンポーネントを追加します。 テキストも自由に追加できます。なお、編集は左側で行います。 画像を追加したりすることもできます。 こんな感じでコンポーネントを追加していきます。 これでページができあがりで
Advanced Custom Fields でプロフィールを拡張 | Taiyo Blog / WordPress
情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。 Advanced Custom Fields はユーザーページにもカスタムフィールドを設定することができるので、プロフィールの項目を追加したい時はこれを使うと便利。 *ユーザーレベルごとの設定も可。 Hide User Profile Fields で必要最低限以外の項目を隠して、必要な項目を追加すればスッキリ。 Advanced Custom Fields で追加した項目をテーマに表示するにはget_the_author_meta(‘フィールド名’); または、the_field(‘フィールド名’, ‘user_ユーザーID’); <?php $aID = get_the_author_meta
Advanced Custom Fields 値とラベルの両方を制御する方法
セレクトboxを選択した場合、 下記のように記述すると、値とラベルの両方を制御することができます。 red : 赤 blue : 青 という説明があります。 これを例にしたときに、 <li class="red">赤</li> と表示できるようにする方法を知りたいです。 <li class="<?php the_field('フィールド名'); ?>">わからない</li> という状態です。 そもそもこういった使い方は可能なのでしょうか…。 ちなみに http://ja.forums.wordpress.org/topic/14231?replies=3 こちらのように、フィールド名自体のラベルを出すことは出来ました。 しかし、値のラベルの出し方がわからない状態です。 どなたかご存知のかた、よろしくお願い致します。
「DISQUS」で高機能コメント欄にレベルアップ！wordopress導入編
「DISQUS」というサービスをご存知でしょうか？ wordpressデザインを学ぶための超有名ブログ「ＷＥＢクリエイターボックス」様を筆頭に、レベルの高そうなwordpressブログのコメント欄でよく見かけるサービスです。 これだけ多くのトップブロガー達が採用するには意味があるのだろう。と思い、正直まだ理解していない機能もあるのですが、当サイトでもコメント欄を「DISQUS」に変更する事にしました。 先に完成イメージからご覧ください。「DISQUS」を導入することにより、このように変わりました。 「DISQUS」はココが凄い！ 私が把握している限りですが、「DISQUS」について簡単に説明しておきます。 「DISQUS」というサービスはwordpressのコメント欄を進化させるとことができるのですが、単なるコメント機能！という訳では無いようです。「DISQUS」の基本的な理念として【コメ
【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法 ｜ KLUTCHE
WordPressは便利です。しかし所詮ブログです。もっと自由な使い方をしたい。そんな願いを叶えてくれるのがカスタムフィールドです。 WordPressの投稿に様々なデータを追加する 例えば、 WordPressでダムの情報をデータベース化したサイトを作りたい。 ダムの写真や、所在地、堤高、湛水量などを管理ページから登録したい。 そんな場合に使うのが「カスタムフィールド」という機能です。 カスタムフィールドどこにあるだ？ 投稿画面の下部にひっそりと存在します。 WordPressをブログとして使っている人はあまり気にしない部分だと思います。 新規投稿画面に表示されない人は「表示オプション」で表示できます。 カスタムフィールドって何だ？ この機能を使うと、投稿に「メタデータ」と呼ばれる任意の「名前」と「値」を追加できます。 要は、タイトル・本文だけでなく、独自の項目を投稿に追加できるという事
WordCamp Kobe 2013 で紹介した『Advanced Custom Fields』のおさらい
知人に「もうちょっと『Advanced Custom Fields』のことを知りたいなぁ」と、ボソッと言われてしまいました。 WordCamp Kobe 2013 の『 sneak idea show – コンテンツやデザインを実現するための事例集』で使ったスライドは、管理画面での操作や functions.php の記述での管理画面の変化を実際のサイトを見ながら解説するという前提で作ったので、スライドを公開してもよくわからないと思う。 というわけで、『 sneak idea show – コンテンツやデザインを実現するための事例集』で解説した『 Advanced Custom Fields 』を使ったコンテンツを記事にしてみます。 まず、実例として紹介したサイトは『宝塚映画祭 | かつて日本最大級の撮影所があった映画の町、兵庫県宝塚の市民映画祭。』です。 このサイトのホーム（トップページ
Custom Field Templateの使い方[WordPress]
カスタムフィールドの内容を設定 次にカスタムフィールドの内容を設定していきます。 『Custom Field Template』は「テンプレートコンテンツ」のフィールドにコードを入力することで フィールドの内容を設定することが出来ます。 コードの書き方は「デフォルトテンプレート」を参考にすると分かりやすいですが基本は下のような形式です。 [KoToRifield] type = text size = 35 label = テキストフィールドだよ 「[KoToRifield]」はファイル名です。ここは半角英数で入力してください！日本語だと出力するときにコケる可能性がありますので。 「type」でフィールドのタイプを指定できます。ラジオボタンとかチェックボックスとかテキストエリアとか。。。 「label」はフィールドに説明をつけることが出来ます！ 各タイプ色々オプションが用意されていますので
![Custom Field Templateの使い方[WordPress]](https://cdn-ak-scissors.b.st-hatena.com/image/square/480459c6170b2d91ffab2dbf8f17f3135a7ab2e2/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fthumb.gif)
Custom Field Template plugin | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go
WordPressを利用して、ブログではなくCMSとして企業サイト・企業ウェブサイト作成・商用ホームページ制作のテクニックを公開。WordPressの最新ニュースやプラグインの紹介、自作プラグインやテーマも開発中。 Custom Field Template plugin [ English Here ] Custom Field Template plugin （カスタムフィールドテンプレート）というプラグインはカスタムフィールドの入力を支援するプラグインだ。あらかじめカスタムフィールドのテンプレートを登録しておくことでキーをその都度入力することなく、テンプレートにある項目の値を入力していくだけでよくなる。このCustom Field Templateというプラグインは、WordPressのカスタムフィールドを多用し、決まったデータを入力し公開しているようなサイトでは便利になるはずだ。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」
WordPressでブログを書く上で、<strong> や<code>、<img>、<!–more–> などのタグを利用することも多いと思います。 記事の投稿画面では、上記のような基本的なタグは「ボタン」として最初から用意されていますが、「頻繁に使う他のタグもここに置きたい!」という場合に便利なプラグインが AddQuicktag です。 例えば、AddQuicktag の設定画面で <pre> タグを登録しておくと、記事の投稿画面に <pre> タグ挿入用のボタンが新たに追加される、という感じです。 タグの他に「ショートコード」なども登録できますので、頻繁に使うコードを AddQuicktag で管理しておくことで記事の編集が捗ります。 なお、AddQuicktag はカスタム投稿タイプには対応していないので、今回はその辺りの対応方法も含めて紹介致します。 AddQuicktag のイン
WordPressのビジュアルエディタをカスタマイズする
Posted: 2010.12.17 / Category: WordPress / Tag: 管理画面 Wordpressのビジュアルエディタは基本的にデフォルトのままでも問題ないかと思いますが、不便なところもありますよね。 この記事ではfunctions.phpを編集してビジュアルエディタをカスタマイズしてみます。 TinyMCE Advancedとかプラグイン入れた方がはやくね？ とか言ってはいけない！ オリジナルのスタイルを適用する。 ビジュアルエディタはそのままだとテンプレートとスタイルが違うので、最終的なイメージがつかみにくいですよね。 テンプレートと同じスタイルを適用して、ある程度イメージの確認ができるようにしてみましょう。 現在使用しているテンプレートフォルダの「functions.php」に以下を記述します。なければ作成しましょう。 functions.php add_e
プロジェクトに合わせたサイトを自由に作成できるWordPressのテーマファイル -Roots
HTML5 Boilerplateをベースにミニマルでアクセシブルなマークアップで、より少ないコードでファイルやテンプレートの構造を設定でき、/wp-content/などのWordPress特有のURLの変更やルートからの相対パスの利用など、カスタマイズに優れたWordPressのテーマファイルを紹介します。 Bootstrapも用意されているので、すぐ使いたい人にも対応！ また、サイト制作中のワークフロー、運営・管理などのメンテナンスにも配慮されています。 Roots Roots -GitHub Rootsの特徴 組織化されたファイルとテンプレートの構造 マイクロフォーマットとARIAに対応したHTML5のテンプレート jQueryはGoogle CDNから最新版を利用 Google Analytics対応 HTML5 Boilerplateの.htaccessをWordPress用にカ
imagefield・filefield の使い方（ver 3.1 以降） | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. このプラグインのメイン機能の一つ、イメージフィールド（imagefield）、ファイルフィールド（filefield）の使い方を説明します。 なお、これらの機能については、ver 3.1 から仕様が変更になりました。 ファイルのアップロードとカスタムフィールドへの挿入 まず、テキストフォーム下の「画像を追加」のアイコンをクリックします（ver 3.2 では「アップロード/挿入」）。 WordPress オリジナルのアップローダーが起動しますので、通常通り画像をアップロードします。 次に、アップローダーの「投稿に挿入」ボタンの手前の「カスタムフィールドに挿入」ボタンをクリックすると、そのアップロードしたファイルの ID と URL がカスタムフィールドに挿入
WordPress 3.3で未対応の｢Custom Field GUI Utility｣を対応する方法
先日のWordPress 3.3へのバージョンアップにともなって、非常に便利に使わせていただいているプラグイン「Custom Field GUI Utility」が利用できなくなってしまいました･･･。 現時点ではオフィシャルでも未対応とされていて、今後の対応についてもどうなるのかわからない状態です。 とはいえ、使えないままなのも困ってしまうし･･･ってことでむりやり使えるようにしてみました。 ちょちょっといじくるのは、 wp-content → plugins → custom-field-gui-utility の中にある、cfg-utility.phpというファイルです。 このファイルの72行目あたりに add_action ('simple_edit_form', array ('cfg_utility_class', 'insert_gui')); という記述があります。 この部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Joomunited | JoomlaとWordPressの品質拡張
Wordpress 3.3でCustom Field GUI Utilityが表示されない件 | ココア a.k.a blackcocoa.info