【WordPress】テーマカスタマイザーを作成する｜notes by SHARESL
テーマカスタマイザーとは WordPressの管理画面でプレビューしながらコンテンツを編集・更新・公開できる機能です。 テキストなどを入力エリアに打ち込むとリアルタイムでプレビューが更新されるので直感的でわかりやすく、初心者でも簡単に修正・更新ができます。 具体的にはWordPressの管理画面に入って「外観 → カスタマイズ」で表示される画面のことです。 何も設定していないとうまく使えませんが、対応しているテーマの場合はここからコンテンツを変更できます。 WordPressの受託案件で何度か使うことがあり、自作することが多くなったので使った方法やコードを一度まとめてメモとして残しておきたいと思います。 公式では「テーマカスタマイズAPI」としてcodexに情報が掲載されています。 テーマカスタマイズAPI https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC
カスタマイザーのカスタマイズ方法！自由度の高いテーマ作りができるようになります | HPcode（えいちぴーこーど）
カスタマイザーに項目を追加する方法 早速カスタマイザーに項目を追加していきましょう。完全にオリジナルな自分の項目を追加する想定で作っていきます。 公式はこちら → テーマカスタマイズ API – WordPress Codex 日本語版 まずはfunctions.phpに以下のようなコードを書いてあげてください。 （全部を丸々コピーでOKです） function my_customize( $wp_customize ) { $wp_customize->add_panel( 'my_panel', array( 'title' => 'パネル名', 'priority' => 1, ) ); $wp_customize->add_section( 'my_section', array( 'title' => 'セクション名', 'panel' => 'my_panel', 'prior
WordPress5.4から変更されたfavicon.icoへのリクエストについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、バックエンドエンジニアの小林です。 今日はWordPress5.4から変更されたfavicon.icoへのリクエストについてご紹介しようと思います。 この記事を執筆中のWordPressの最新バージョンは5.9なので、なんで今更と思われてしまうかもしれませんが、気づかなかった機能だったのでこうして記事にしてしまいました。 WordPress5.4より前 WordPressのテーマ開発をされている方は、これまでfaviconをどのように設定していましたか？ アイコンファイルはテーマファイル内に配置し、テーマファイル内のヘッダー部分で、そのファイルを指定しているケースなどが多いように思います。 この場合、通常アクセスされるWordPress内のページは問題ありませんが、アップロードされたメディアファイルなどへアクセスした場合はどうだったでしょうか？ ブラウザなどの状況によっては、f
日本語でも使いやすい！フルサイト編集に対応した無料WordPressテーマ
2021年12月7日 Wordpress WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面（ダッシュボード）でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします！ ↑私が10年以上利用している会計ソフト！ フルサイト編集とは？ フルサイト編集（FSE＝Full Site Editingとも呼ばれます）は、投稿やページだけでなく、ヘッダーやフッター、サイドバー、ナビゲーションメニューなど、Webサイト内のあらゆる部分にブロックを使って構成できる機能です。つまり、これまでは投稿やページのコンテンツ部分のみブロックに対応していましたが、フルサイト編集機能のついたテーマであれば、Webサイ
WordPressのget_template_part関数にバージョン5.5.0から追加された新機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WordPress5.5.0から追加された新しい機能についてご紹介します。 この記事を執筆中のWordPressの最新バージョンは5.8.1なので、なんで今更と思われてしまうかもしれませんが、それほど個人的に待ち望んでいたすばらしい機能だったので、こうして記事にしてしまいました。 結論としましては、get_template_part関数が便利になりました、という話になります。 get_template_part関数のこれまで使い方 get_template_part関数とは、テーマの中で任意のテンプレートファイルを呼び出すことができる関数です。用途としては、シングルページやアーカイブページなどにおいて共通して表示したいパーツがある場合に、そのパーツを別のテンプレートファイルにしておくことにより一箇所で管理する、といったことができます。 具体的な使い方を説明します。 最新記事n件みたいなパー
GitHub Actions を使って WordPress のテーマをデプロイ（アップロード）する ｜https://wp.yat-net.com/name
2021年 10月 27日 GitHub Actions を使って WordPress のテーマをデプロイ（アップロード）する カテゴリ： WordPress タグ：GitHub FTP を使ったアップロードが面倒なのでなるべく Git と連携したデプロイをしたい。そうなると CI のサービスが割と主流なんですが、GitHub Actions を使うともっとお手頃にローカルからサーバーへデータ転送ができるのでやり方を書いておきます。 レンタルサーバー WordPress のお仕事だとエックスサーバーやさくらインターネットを使うことが多いのですが、この場合は転送に FTP を利用します。 まず設定するのは、リポジトリにある Settings の secrets に FTP 情報などを登録します。 ここで登録する内容は外部から見えないので安心して利用可能。 テスト環境と本番環境など転送先サーバ
theme.json を使ったテーマデザインの設定
以下は、Jeff Ong が書いた WordPress.org 公式ブログの記事「Configuring Theme Design with theme.json」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 WordPress 5.8以降、新しいツールである “theme.json” をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。 当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。 theme.json とは 技術的に言えば、theme.json はテーマのディレクト
WordPressの Docker環境が簡単に。wp-envを使ってみよう | ともすた
WordPressの Docker環境が簡単に。wp-envを使ってみようWordPressのテーマやプラグインを作る場合、XAMPPや MAMPなどの仮想環境ソフトで作るとか、Dockerで作るなど色々な方法があります。 そんな中、WordPressの開発チームで公…www.youtube.com WordPressのテーマやプラグインを作る場合、XAMPPや MAMPなどの仮想環境ソフトで作るとか、Dockerで作るなど色々な方法があります。 そんな中、WordPressの開発チームで公式で開発環境を整備するためのソフトウェア「WordPress/env(wp-env)」をリリースしているので、これを利用して開発環境を整えてみましょう。 Dockerをセットアップする wp-envは、Dockerを利用するため、まずはこれをセットアップしましょう。Dockerの公式サイトから「Get
おしゃれなホームページをつくろう！日本語対応のWordPressおすすめ有料テーマ8選
特殊な業種やジャンルのおしゃれなWordPressテーマをお探しですか。 この記事では、あらゆる業種や用途に利用できる多機能なWordPressプレミアムテーマ厳選8個をまとめています。 デザインのサンプルとなる豊富なテンプレートや、コード知識不要でウェブサイトを作成できるページビルダー機能も実装されているので、ウェブ知識がないひとでも、手軽にWebサイトの運営をはじめることができます。 ニッチなビジネスのニーズを含む、ウェブデザイナーやクリエイティブなアーティスト、ビジネスオーナーが必要とする機能をすべて提供してくれる、高品質で多機能なWordPressテーマに絞ってのご紹介です。 多機能なWordPressテーマとは？ 高品質で多機能なWordPressテーマの条件としては、以下の点を押さえておくと良いでしょう。 レスポンシブ対応で、柔軟性があり、SEOも配慮されている 使い方を習得し
「写真ポートフォリオサイト」をささっと作りたいときに便利な無料テーマ＆無料プラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ハルです。 趣味で写真を撮ることが多くなりました。休日に人物を撮ったり、風景を撮ったりしています。とても楽しいです。 エンジニアですが、フォトショップの知識はWebサイト制作をしていることもあってある程度あり、Lightroomも意外とすんなり使えました。RAW現像、楽しいですね。 SNSでシェアするのが楽しかったのですが、あとから見返すのがいまひとつ不便で……。そこで、Webサイトに公開したらもっと便利なんじゃないかーと思いました。 今回は、ポートフォリオサイトをコードを書かないで作りたいと思います。WordPressの無料テーマとプラグインのうち、どんなものを利用すればよいポートフォリオサイトが作れるかご紹介します。 おすすめプラグイン 個人的にこのプラグインがあれば、見た目的にも問題ないのではというものを紹介します。 EWWW Image Optimizer https:
33 Clean WordPress Themes: To Make Modern Websites in 20243 | Envato Tuts+
14. Ratio - Beautiful Modern Architecture WordPress Theme The Ratio theme has plenty to offer to any architect looking for a clean and modern WP theme to make their site in 2024. Several homepage layouts are available and you can add parallax effects to your slideshows to catch the visitor’s attention and highlight your recent projects. This is one of the modern WordPress themes like SquareSpace i
20+ Best Flat Design, Modern WordPress Themes for 2024 | Envato Tuts+
Flat design burst onto the web design scene some years ago, arguably fuelled by the tech giants of the time. Major influencers included Microsoft’s Metro style, Apple’s release of iOS7, and Google’s Material design, all characterized by vibrant colors and a minimalistic approach to user interfaces. Since then plenty of WordPress themes have made use of flat design, and whilst nowadays it might see
WP テーマカスタマイザー入門① – シンプルなチェックボックスを作る – ミルログ
最近人気の WordPress テーマでは豊富なカスタマイザー項目が設置してあるものが多いかと思います。ただ、カスタマイザーに関する日本語の情報が思ったよりなかったので、Coldbox テーマを作った時の知識を基にカスタマイザーの設定方法をまとめてみようかと思います。 カスタマイザーファイルの設置場所 これは決まりがあるわけではないんですが、カスタマイザー系のファイルは一つのフォルダにまとめて書いてあることが多いです。私は普段 czr/ というフォルダを作ってその中で管理しています。 また、ほかのテーマを見ていると、customizer-setting.php, customizer-section.php, customizer-control.php のように用途別のファイルにしているものも多いようです。 もちろん functions.php に書くことも出来ますが、あまりに複雑化しす
WordPressのテーマカスタマイザーに独自の項目を追加する方法 | TechMemo
WordPressのテーマカスタマイザーに独自の項目を追加する方法をご紹介いたします。 テーマカスタマイザーで以下のようなことを実現する方法を解説しています。 チェックボックスの有無で出力を制御 カラーピッカーでメインカラーを変更 入力したテキストをテーマ内に出力 選択した画像をテーマ内に出力 出力の有無を選択するチェックボックスを追加 テーマ内にコンテンツを表示するかどうか、テーマカスタマイザー内で選択できるようにする方法を解説します。 テーマカスタマイザーに独自項目を追加するには、「セクション」「セッティング」「コントロール」を設定してあげる必要があります。functions.phpに以下のようなコードを追加することで、独自の項目を追加します。 function customize_register_onoff( $wp_customize ) { $wp_customize->add
【2018年WordPress魔改造TOP3】第3位：特定のテンプレートだけ別テーマを使う | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「魔改造」。過剰なカスタマイズを施したものを、我々は時にこう呼びます。この字面に溢れる厨二感……。 こんにちは、バックエンドエンジニアのリョウタです。 WordPress系のイベントに登壇する際のスライドにも書いているのですが、私はWordPressの魔改造が大好きです。 「これやるんだったらスクラッチで作ればいいじゃん」って言われそうなものを、なかば無理やりにでもWordPressで実装するのが楽しいんです。わかりますかね？ この気持ち。 今年も今年とて、新規・リニューアル・保守とさまざまなWordPress案件に関わってきましたが、その中でも特に記憶に残った「魔改造」３つを順に振り返っていこうと思います。今回は第3位の発表です。 第３位：特定のテンプレートだけ別テーマを使う 予算や納期の兼ね合いで、段階的なリリースになる案件はままあります。 新規制作案件の場合、リリース後に待つフェーズ
いまさら始めるGulpでWordPressテーマ開発 | オレインデザイン
今回はGulpの導入から最低限の活用部分まで、どうやったら使えるのか・使えるようになるのかを紹介してみたいと思… こちらを元にして、今回はWordPressテーマのGulp開発環境を作ってみようと思います。といっても、ベースはすでに出来上がっているので、少し変更を加えたりする程度になります。 あと、環境としてはLocal by Flywheelを使うことを想定しています。 内容としては、 WordPress開発環境を作るベースの環境を作る 自動でrtl.cssを書き出す 監視タスクを作る というような感じになります。他のSassコンパイルやJavaScriptの結合・圧縮部分は前回のコードに書き出し先を変更したりする程度で大丈夫です。では始めていきましょう。 WordPress開発環境を作るベースの環境を作る まずは、前回作った環境のpackage.jsonとgulpfile.jsをコピー
Web Design Courses and Tutorials | Envato Tuts+
Learn web design with thousands of free tutorials! Maybe you want to know how to build a site using WordPress themes, or maybe you want to master more advanced web design topics like interface design or responsive design. Whatever you need, you'll find it here. Stay up to date with the latest features and developments in CSS, Shopify, WooCommerce, and more. Learn how to design landing pages and em
商用利用無料、2017年おすすめの人気が高いWordPressのテーマファイルのまとめ
WordPressのテーマファイルも目を離すと、便利になり、とんでもなく進化しています。企業サイトやプロダクトのランディングページ、ポートフォリオ、個人ブログなど向けに制作されたWordPressのテーマファイルを紹介します。 WordPressは、11/14にメジャーアップデートとなる4.9のリリースが予定されています。おそらく5.0ではGutenbergが実装されるので、それへの足掛けとなるのでしょうか。 Sydney デモページ ビジネス向けのWordPressのテーマファイル。レスポンシブ対応で、ヘッダやコンテンツやナビゲーションなどのレイアウトは多くのカスタマイズが用意されています。ランディングページ用のコンポーネントは組み合わせて利用できます。 Hestia デモページ ランディングページをはじめ、Eコマース、ブログなど、多目的用のWordPressのテーマファイル。Mater
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
22 Best Dentist, Doctor, Medical and Health WordPress Themes (2024) | Envato Tuts+
30 Top-Notch Free WordPress Themes You Should Check Out In 2018 - Designbeep