【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
マインドマップAI - 与えられたテーマ・文章をマインドマップ化できるAI
マインドマップAI テーマや文章を自動でマインドマップ化できるAI 文章から テーマから 両方 テーマをマインドマップ化： 例： 京都旅行、プロ野球の球団、コロナ 文章をマインドマップ化： 例：ワイのペット、桃太郎 出力： 画像をDL freemind形式(.mm) テキストをコピー AIリンク集： ・AI作文くん ・AI作文判定くん ・マインドマップAI ・宿題代行AI ・宿題ヒントAI ・AI事務員 ・履歴書AI ・プロンプトxプログラム ・Talk-AI - 作曲MML-AI - モールス信号AI - 占い師AI ・AIメーカー satoru.net - with ChatGPT API
このダークテーマは目に優しく、コードも見やすい！ VS Codeのエレガントなモノクロームのテーマファイル -Sequoia
ダークテーマは好きだけど、#000のブラックだったり、テキストが派手なカラーだったりすると、目が疲れませんか？ 背景のブラックはほんの少しだけブルーがかった夜空のように落ち着いた色合いで、グレーの濃淡だけのMonochromeと淡いカラーで構成されたMoonlightの2種類の配色が用意された、VS Code用のテーマファイルを紹介します。
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 はテーマのディレクト
コーディングに役立つ！Visual Studio Codeのちょっとかゆいところに手が届くような便利な機能とテクニック
あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。 今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方法など、ちょっとかゆいところに手が届くような便利なテクニックです。 5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension") by Mohmed Ishak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ファイルを常に新しいタブで開くようにする 2. コメントのカラーを変更する 3. コードを大きく表示する 4. カ
自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できる・「Theme Studio」
Theme Studioは自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できるWebアプリです。 使い方は簡単で、各所の色を決めていくだけ、というものになりますが、その「各所」の数が非常に大量にあります。全部で240か所くらいだと思います。 全てを1から決めるのではなく、一応ダークとライトの雛型が用意されていますのでどちらかを選んで色を決めていき、終わったらJSONファイルをダウンロードして利用する、という流れの様です。 左カラムで場所を選び、任意の色を決めていく作業になります。 場所は多くに3つに分けられていて、左上のタブで選択できます。「COLORS」ではサイドバーやタイトル、ボタンなど外観メイン、「EDITOR」では名前通りエディタの機能部分の色、「SYNTAX」はコードのカラーになります。 インストール前に確認できるのは良いですよね。僕自身はATOM派でVS
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も配慮されている 使い方を習得し
CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ
2021年12月14日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK！学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。 ↑私が10年以上利用している会計ソフト！ デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてくださいね！ Water.css GitHub｜デモ クラスなしCSSフレームワークとして最初に目立っていたのがこのWater.css。ダー
VSCodeでコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニック
Visual Studio CodeでWeb制作・開発のコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニックを紹介します。 My Web Development VS Code Settings, theme, Extensions, tips and tricks br lampewebdev(@lampewebdev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私がVSCodeを使用している理由 VSCodeのテーマ・アイコン・フォント VSCodeの機能拡張 VSCodeの設定 VSCodeの便利な使い方 私がVSCodeを使用している理由 私はプログラミングを始めて以来、たくさんのエディタやIDEを使ってきました。Eclipse、Netbeans、Notepade ++、Brackets Ed
「写真ポートフォリオサイト」をささっと作りたいときに便利な無料テーマ＆無料プラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ハルです。 趣味で写真を撮ることが多くなりました。休日に人物を撮ったり、風景を撮ったりしています。とても楽しいです。 エンジニアですが、フォトショップの知識はWebサイト制作をしていることもあってある程度あり、Lightroomも意外とすんなり使えました。RAW現像、楽しいですね。 SNSでシェアするのが楽しかったのですが、あとから見返すのがいまひとつ不便で……。そこで、Webサイトに公開したらもっと便利なんじゃないかーと思いました。 今回は、ポートフォリオサイトをコードを書かないで作りたいと思います。WordPressの無料テーマとプラグインのうち、どんなものを利用すればよいポートフォリオサイトが作れるかご紹介します。 おすすめプラグイン 個人的にこのプラグインがあれば、見た目的にも問題ないのではというものを紹介します。 EWWW Image Optimizer https:
33 Clean WordPress Themes: To Make Modern Websites in 2023
Freelancers and business owners, as well as authors, who want to put the focus on their products and services can benefit greatly from a minimal WordPress theme. Find beautiful, clean WordPress themes on ThemeForest and browse through the best themes that are trending in 2023. Best premium WordPress themes with clean, modern designs (2022). Aside from minimalist design, simple WordPress themes are
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VS Codeの見やすいテーマが登場！GitHubのデザインでコードも快適に -GitHub VS Code theme
22 Best Dentist, Doctor, Medical and Health WordPress Themes (2024) | Envato Tuts+
VSCodeやAtom、Sublimeなど、様々なテキストエディタのカラーテーマを作成、公開しているプロジェクト・「RAINGLOW」
