WordPressは機能として実装できないものはないのではないか、と思えるくらい自由度が高く多機能なCMSです。一方で多機能であるが故に管理画面のメニューも多く、サイトによっては使っていない機能なのに導線が残っていたり、設定画面に到達するまで階層が深かったり、操作が複雑だとユーザーに使いにくい管理画面だと思われてしまいます。 この記事では私が普段の制作でよく行うWordPressの管理画面のカスタマイズ方法について、独自で実装するものとプラグインを導入して実現するものを合わせて18個、ソースコードと解説を交えながらご紹介します。エンジニアだけでなくデザイナーやディレクターの方も「こんなことができるんだ」と知っておくだけで、より使いやすい管理画面に仕上げていくことができると思うので、ぜひ参考にしてみてください。 その1. ログインページのロゴを変更する 以下のログインページのWordPres

説明 セルの結合と分割 選択した複数のセルを、結合、または、分割できます。 柔軟なデザイン設定 表、セル、キャプションのタグごとに、個別のスタイルを設定できます。 高度なUI セクション内のセルを一括で簡単に選択したり、ボタンを使用して行と列を選択、追加、または削除したりできます。 レスポンシブ対応 デスクトップとモバイル両方で、水平スクロールするテーブルを設定することができ、モバイルではセルを垂直方向に配置することができます。デスクトップとモバイルを切り替えるブレイクポイントは、自由に変更できます。

おはようございます！WEBデザインを中心に・・・お仕事に役立ちそうなことや暮らしのおすすめ情報など寄せ集めメモメモなブログです 投稿の公開ステータスに「この投稿を先頭に固定表示」というチェックがあります。 これはデフォルトではトップページでのみ有効になるもので、カテゴリページではチェックがあっても先頭に固定表示にはなりません。 これをカテゴリページでも反映するようにします。 category.php <?php $get_cat = get_the_category(); $cat = $get_cat&#91;0&#93;; $sticky = get_option('sticky_posts');?> <!-- 1ページ目の時先頭固定表示 --> <?php if (!is_paged()) : ?> <?php if(!empty($sticky)): $args = array(

「icoro One Word」は一言を表示するWordPressのプラグインです。icoroに一言を表示したくて作ったのですが、せっかくなので、プラグインにして公開することにしました。もし使えたら使ってください。 インストール ダウンロードしたzipファイルを解凍します。 必要に応じてデフォルトメッセージを変更します。(変更方法は後述) プラグインファイルをpluginsフォルダに転送します。 プラグインの管理画面でicoro One Word を有効化します。 アップデート 旧バージョンからアップデートする場合は、単純にプラグインファイルを置き換えるだけでOKです。 使い方 メッセージ表示場所の設定 テーマのメッセージを表示したい場所に <?php icoroOneWord(); ?> と記述してください。もっというと、 [code lang=”php”]<?php if( funct

InstagramをウェブサイトやWordPressに表示させたり、WordPressの記事を自動的にInstagramにも投稿させる方法など、Instagramの連携方法をご紹介します。 「ホームページにインスタグラムの写真を表示したい」 「ブログを投稿すると、インスタグラムにも自動で投稿したい」 と言ったケースは多いと思います。 ホームページとインスタグラムの連動についてベストな方法をご紹介いたします。 ホームページとインスタグラムの連動させる事前確認 SEOの影響 表示する枚数やキャッシュ機能、LazyLoadなどを利用することで、素早く表示させることができます。 instagramの写真を表示させることで、ホームページの表示速度が遅くなり、SEOへの影響を気にされる方もいますが、当社の事例や、海外の事例をみても影響はありません。 ただし、サイトスピードテストには影響するため、点数が

世界で愛用されているメールフォーム プラグインContact Form 7の設定、データ保存、スパム対策、バリデーションなど、カスタマイズから便利なプラグインをご紹介します。 WordPressのフォームプラグインでは「Contact Form 7」と「MW WP Form」が人気です。 MW WP Formは標準で「問い合わせデータの保存」「確認、エラー、完了ページ」の設定も可能となっています。 それでもContact Form 7をお薦めするのは豊富なアドオンプラグインがあるからです。 MW WP Formを導入しても、お客様の要望に答えられない事が多々ありContact Form 7へ乗り換える事も少なくありません。 アドオンを利用することで、スピーディーでコストを抑えることも可能となります。 Contact Form 7設置の流れ 設定画面でフォームを作成する メールの設定 自動返

WordPress5.2以降は「ブロックマネージャー」から非表示にしたいブロックを設定可能でしたが、WordPress5.9より「設定」→ブロック→表示ブロックへ移動しました。 WordPress5.9以降であれば「設定」からブロックの非表示設定ができます。 投稿・固定ページ編集画面にて、右上の歯車アイコンの右の三点リーダをクリックすると、メニューが表示されるので「設定」をクリックしてください。 「ブロック」タブに切り替えて「表示ブロック」にて、非表示にしたいブロックのチェックを外してください。 ただ、この方法の場合、設定を知っている人なら誰でも変更できるので、使おうと思えば使えてしまいます・・・ プラグイン「 Disable Gutenberg Blocks – Block Manager 」を使う プラグイン「 Disable Gutenberg Blocks – Block Mana

[レベル: 中級] この記事では、Wordpress 5.5 に標準実装されたサイトマップ生成機能を無効化する方法を紹介します。 WordPress のコア XML サイトマップ機能 リリースされたばかりの WordPress 5.5（この記事を公開している時点での最新バージョン）は、検索エンジン向けの XML サイトマップを作成する機能をコア機能として標準実装しました。 これまでサイトマップ生成にはプラグインを利用していました。 コア サイトマップは WordPress をインストールしたディレクトリの直下に作られます。 ファイル名は wp-sitemap.xml です。 example.com に WordPress をインストールしていたらサイトマップの場所は example.com/wp-sitemap.xml になります。 アクセスしたサイトマップはこんな感じです（正確には、サイ

関連記事WordPressテーマ「Xeory Extension」をカスタマイズ（その９）CSSカスタマイズ：固定・投稿ページの色・形状変更

WordPressのインストールや設定はもちろん、独自テーマの作成手順、高度なカスタマイズ、運用のノウハウまでも詳しく解説されたWordPress 5.x対応の解説書を紹介します。 「仕事の現場でサッと使える！」とある通り実践的な内容で、WordPressで困った時にはまず最初に手に取って調べたい一冊です。 本書は、WordPressの基本からクライアントワークで使われる技術やノウハウまで詳しく解説されています。完全に初心者の人には少し敷居が高いかもしれませんが、WordPressやHTMLやCSSの経験がある程度ある人にお勧めします。

DISCLAIMER: This article is more than a year old and may not be current. はじめに 先ずはじめに、 導入するにあたり gutenberg-examples (カスタムブロック) のフォルダーで作業する事を 前提としてお話していく事とします。 https://neco913.kirara.st/post-3485/ ブロックごとにスタイルを追加する ↑画像のように プレビュー機能もあり、 使いやすくなっています。 ブロックスタイルの追加方法 まず、 カスタマイズするためのファイルを 読み込む記述をします。 gutenberg-examples/index.php に 以下のコードを書きます。 // スタイルセレクト機能 script function style_editor($hook) { wp_enqueue_sc

ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。

個人用メモです。 !! ======================== !! ※この記事は2019年の記事です。著者はもうWordPressを使用しておりません。この記事で紹介している内容は2019年当時の内容である事を理解した上で、実際に設定する際は最新の情報を確認しながら行ってください。 2019/9/26追記 2020年1月1日より静的IPが有料になる旨Googleから発表がありました。 $0.004/時間=最大約300円/月が有料となります。 それ以外の部分についても無料でなくなり次第記事を更新してまいります。 情報: @mattn 様 2020/3/20追記 まだ請求額が0円だったので「あれ？」って思って調べたら、上記の静的IP有料の変更は1/1から反映されてるものの、キャンペーンで2020/4/1までは割引されている事に気がついたので注釈追記しました。ちなみに割引されなかった

wordpressで構築したサイトで大量に商品を扱ったり、大量の記事を作ってカスタムフィールドで値を付けて管理するようなケースで使える方法を紹介します。 カスタムフィールドの値を頻繁に編集する場合やまとめて変更する場合等、一つづつ投稿画面を開いて確認して編集するのは非効率！ せっかくカスタムフィールドを作ったなら、まとめて管理した方が作業性が良いですよね。 今回はfunctions.phpを中心にカスタマイズします。(一部jQuery)主な作業内容は以下の２点です。 主な内容 投稿一覧ページにカスタムフィールドの表示欄と入力された値を表示(functions.php) クイック編集でのカスタムフィールドの編集を可能にする。(functions.php/jQuery) 準備:カスタムフィールドを作成する Advanced Custom Fieldを使ってカスタムフィールドを作成 今回はプラグ

body_class()はbody要素に使用するWordPressのテンプレートタグで、これを使うことで表示されるページによって様々なclassがbody要素に付加されて非常に便利なのですが、たまに「このclassもほしい」というときがあるので、そういった際に使えるbody_class()に独自のclassを追加する方法です。 また、いっそのことbody_class()を使用せずに、その代替としてbody要素に完全に独自のidやclassのみを指定するという方法も備忘録を兼ねて併せて紹介します。 body_class()の使い方 Twenty Fourteenなどデフォルトテーマのheader.phpを見ると確認できますが、body_class()の基本的な使い方は下記のように記述するだけで使用できます。 上記を記述して各ページのソースを確認するとbody要素に様々なclassが付加されて

WordPressのテーマ(テンプレート)って一体どれくらいあるかご存知ですか？ なんと、6月15日現在、WordPress公式サイトに掲載されている無料のWordPressテーマだけでも1100個以上もあるんです。 となると、選択肢が多すぎて「どのWordPressテーマを使うべきなんだろう…。」と迷ってしまうはず。 実は、WordPressを始めたばかりの頃の僕がそうでした。 そこで、この記事では、僕が会社経営を通じて3年間WordPressを使ってきた中で どんなシチュエーションでも使える使いやすいテーマ2021年現在売れている人気のテーマプログラミングスキル無しにやりたいことができる多機能なテーマ の3つの条件を満たしたテーマを5つだけ厳選して紹介します。

サーバーサイドのレンダリング（SSR）を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング（SSR） バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか