WordPressのブロックエディタのチューニング - シナプス技術者ブログ
システム開発課の今門です。 前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。 今回はブロックエディタのチューニングについて話します。 現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。 高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。 そのためのTipsをいくつかご紹介します。 [Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする [Tips 2] 必要なブロックのみを表示する [Tips 3] ブロッ
【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita
はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSCodeを使う人全員向け まずはじめにVSCodeで開発をしている人、全員におすすめをしたい拡張機能を紹介しておきます。 自分自身が使った拡張機能の中で「とりあえず入れて損はない」というものを厳選しています。 それでは紹介していきます。 Japanese La
WordPress 権限別に管理画面をカスタマイズする方法 - by Takumi Hirashima
WordPress 権限別に管理画面をカスタマイズする方法を紹介します。 例えば、寄稿者権限ユーザーに特定の項目だけを触らせたいときに便利な方法です。 権限別にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズ 寄稿者権限でも画像をアップロード可能にする 他のユーザーがアップロードした画像を非表示 寄稿者権限でログイン時のみ専用のCSSを読み込む 権限別にサイドバーメニューをカスタマイズする方法 権限別にサイドバーメニューをカスタマイズする方法を紹介します。 次のコードをテーマファイル内の function.php に追加します。 /*【管理画面】権限別にサイドバーメニューの表示をカスタマイズ */ function remove_menus () { if (current_user_c
theme.json を使ったテーマデザインの設定
以下は、Jeff Ong が書いた WordPress.org 公式ブログの記事「Configuring Theme Design with theme.json」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 WordPress 5.8以降、新しいツールである “theme.json” をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。 当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。 theme.json とは 技術的に言えば、theme.json はテーマのディレクト
WordPressでCSSとJSのキャッシュ対策を行う - to-R Media
JavaScriptファイルやCSSファイルをCDNにキャッシュさせるケースはよくあると思います。その場合、同じファイル名だと更新してもキャッシュが効いてしまって更新されません。 ファイル名のGETパラメータにタイムスタンプを加える <link rel="stylesheet" href="<?php site_url(); ?>/assets/css/main.css?date=<?php echo date(YmdHis); ?>"> 目的は達成できていますが、ブラウザにキャッシュさせることができず、都度ファイルを取得してしまいます。パフォーマンス面は最悪です。 手動でバージョンを記述する
Webサイトをダークモードに対応させよう
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ ↑私が10年以上利用している会計ソフト！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわ
WordPressで特定ページにだけコードを埋め込める便利プラグインの使い方をご紹介 -CSS & JavaScript Toolbox
特定のページだけヘッダに手をいれたい、テキストや画像を加えたい、CSSやJavaScriptやPHPを適用するなど、特定の複数ページにだけコードを埋め込めるWordPressのプラグインを紹介します。 個別にCSS/JavaScriptを埋め込むことができるプラグインは他にもありますが、HTMLやPHPにも対応、そしてそれらを一元管理できるのはこれだけだと思います。 CSS & JavaScript Toolbox 以前ご紹介したCSS&JavaScript Toolboxが新しいバージョンをリリースされたので、改めて紹介します。 新しいバージョンになり、Free版とPro版の機能の差はなくなりました。 ※Pro版はサポートやフォーラムへのアクセス権がつきます。 CSS & JavaScript Toolboxの特長 CSS & JavaScript Toolboxのインストール CSS
ぼくのかんがえたさいきょうの editor-style #wpacja2013 - Toro_Unit
WordPress Advent Calendar 2013、3日目を担当させていただきます。@Toro_Unitです。 今回はWordPressで活用されているようで活用されていないような気がする、editor-style.cssをがっつり掘り下げてみようかと思います。 そもそもeditor-styleとは WordPressの投稿画面のビジュアルエディタ(ビジュアルリッチエディターとも言いますね)に適用するCSSのことです。 テーマのfunctions.phpに add_editor_style(); と記述すると、テーマ内のeditor-style.cssというファイルが、読み込まれるようになります。 また、引数にファイル名を指定することが可能で、その場合、 add_editor_style("css/editor.css"); とすると、テーマディレクトリのcss/editor.c
wp_register_scriptとwp_enqueue_scriptの使い方とその違いとは
$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます$srcはJavascriptのパスを書きます。$depsはどのJavascriptの後に読み込ませるか決めることができます。基本的には、読み込ませるwp_enqueue_script()の順に登録されますが、依存関係があるJavascript(JQueryプラグインなど)を登録させたい場合は、依存元のJavascriptの$handleを書いておくとそのJavascriptの後に登録されます$verは読み込ませるJavascriptのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与され
個別のHTML, CSS, JS, PHPを追加・管理できるプラグイン -CSS & JavaScript Toolbox | コリス
WordPressで特定のページだけ個別のスタイルシートやスクリプトを使いたい！ しかも1ページだけでも複数のページにも適用する場合がある！ そんな要望を叶えてくれます。 投稿記事、固定ページ、カテゴリページ、カスタム投稿記事に、個別のHTML, CSS, JavaScript, PHPのコードを追加でき、一元管理もできるプラグインを紹介します。 CSS & JavaScript Toolbox CSS & JavaScript Toolbox -WP Plugin Directory 以前、紹介したCustom CSS and JSは記事や固定ページごとにそれぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインで、これは手軽に利用できて便利ですが、今回紹介するのはそれより高機能。 まずは、その画面をご紹介。 当ブログにインストールした画面です。 左パネルで
多言語化プラグインWPMLとW3 Total CacheでCSSが適用されない
This post is also available in: English-US (英語) 多言語化プラグインWPMLを使っているのですが、日本語だと正常にCSSが適用されているのに、英語言語版に切り替えるとCSSが一切適用されなくなってしまっていました。 本記事はその時の対策メモです。 WPML使って多言語化したらCSSが適用されない。原因はW3 Total CacheのMinify。 HTMLソース(画面右クリック＞ページのソースを表示)を見て確認するとCSSの参照URIが、日本語表示だと https://www.amelt.net/Minify済みのCSSのディレクトリ で表示されているのに、WPMLで英語言語版にすると https://www.amelt.net/en//https://www.amelt.net/Minify済みのCSSのディレクトリ になっていました。 CS
【AddQuicktag】ビジュアルエディタから"class"や"id"がプルダウンから選べるプラグイン | Wordpress奮闘記
WordPressのテーマには、CSSファイルにさまざまな”class”属性や”id”属性が用意されています。 これらをどう活用するかが美しいサイトを作っていくポイントになるようです。 特に、有料テーマを購入した場合、これらを活用しないと宝の持ち腐れになってしまします。 例えば、前の記事でご紹介したように、この賢威ではさまざまなアイコンなどが用意されています。 しかし、このような場合、いちいちタグを手書きで修正しなければなりません。 例えば、上の画像の一番上の場合、ソースに下記のように直接書かなければならず、とても面倒です。 <p class=”caution1″>先頭にCHECK！という画像が付いた状態で表示されます。</p> このような手間を大幅に軽減してくれるのが「AddQuicktag」です。 「AddQuicktag」のインストール方法 「プラグイン」－「新規追加」を選択します。
arrick.info
Domain for sale. Call +1 339-222-5134 or click here to make an offer
WordPressのガラケー変換プラグイン・Ktai Styleでthe_content()内の要素をスタイリングしてみる
スマートフォンサイトのWebデザイン に関する情報の配信が多いですが、 ガラケーサイトの制作需要もまだ健在 ですのでTipsを備忘録も兼ねて書いて みます。WordPressのKtai Styleで the_content()内をスタイリングする、 というもの。 まず最初に、僕はKtai Styleの仕様に関する知識は殆どありませんのであまり良くない方法なのかもしれません。その程度の記事としてお受け止め頂ければと思います。 Ktai StyleのテーマカスタマイズKtai Styleのテーマデザインの前に下準備。基本的には開発者さんが用意してくれたKtai Style用の既存テーマをコピーし、style.css内を書き換えて作ります。 /* Theme Name: foo Theme URI: http://example.com Version: 1.0.0 Description: M
管理画面内でスマフォやタブレット別にCSSを書けるWordPressプラグイン・Mobile CSS
ちょっと便利そうだったので 備忘録。スマフォやタブレット のデバイス別にそれぞれに適応 させたいCSSを管理画面内で 書ける、というWordPressの プラグインです。 スマフォでもiPhone用、Motorola用、タブレットならiPad用、Nexus用、Kindle用などのように細かく設定できます。 シンプルなプラグイン名ですが、かなりの数のスマフォとタブレットデバイスをサポートしています。個別にCSSを適応させられるのでコンテンツ次第では結構役立ってくれるかもしれません。 カスタム投稿タイプを応用してCSSを書く、と言う珍しい仕様です。いつも記事を書く場所にCSSを書き込みます。後は下部のメタボックスでデバイスを選択し、保存すればデバイスごとにCSSを適応させる事が出来ます。 他のデバイスに別のCSSを用意したい場合は、記事を追加する感覚で再度作ればいいだけ。メタボックスのセレクト
WordPress3.4のライブプレビュー機能にCSS項目を追加できるプラグイン・Live CSS Preview
WordPress3.4から搭載されたライブ プレビュー機能に、CSSを直書きする 項目を追加できるWordPressのプラグ イン・Live CSS Previewをご紹介し ます。こういう事も出来るんですね。 WordPress3.4のライブプレビュー機能(テーマカスタマイザー？)は、テーマのプレビューを見ながらタイトルを変更したり、ヘッダ画像を変更できる機能ですが、この項目にCSSの項目を加えるプラグインがLive CSS Previewです。尚、ライブプレビュー機能の細かいは偉い先生方がしてくださるでしょうから一般人の僕は出しゃばらない様にしときますね。 こんな感じでCSS項目が追加されています。あとはいつも通り書けば即座に右のプレビューに反映されます。で、保存すればカスタマイズ完了、みたいな流れです。それだけのシンプルなプラグインですけど、便利っちゃ便利ですね。 JavaScri
利用中のテーマやプラグインのCSS編集と保存がその場で出来るWordPressプラグイン・WP Live CSS Editor
WordPressを使ったWebサイトで現在利用中の テーマやプラグインのCSSをその場で編集、 保存を可能にするWordPressプラグインの ご紹介。多用するものではありませんが、 開発中とかに使っても便利かも、と思った のでメモがてら。 何度か似たようなものもありますけど多くは無いので選択肢の一つとして。Webサイトを見ながらその場で利用中のテーマやプラグインのCSSを編集、保存できるプラグインです。ローカル環境で開発の手助けにもなるかな、とか思ったりしましたよ。 これ便利ですねー。機能はシンプルで、Webサイトの右側にボタンが出るので、クリックするとエディターが開きます。あとは修正して保存すればいいだけ。 編集中はインタラクティブに反映されますのでサイズの指定ミスなんかをするとエディタも場外にすっ飛ばされて編集できなくなっちゃうので気をつけてください。微調整向けですかねー。 編集し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
imamura.biz
WordPressの可能性がさらに広がる！Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ
