TypeScript + styled-components で Theme に型をつける - Qiita
概要 styled-components では <ThemeProvider> を用いることで、プロジェクト全体で使用するカラーコードの Theme を取り扱うことができます。 https://www.styled-components.com/docs/advanced#theming この記事ではこの Theme に対して独自の型を定義する方法を紹介します。 環境 react@16.9.0 typescript@3.5.3 styled-components@4.3.2 @types/styled-components@4.1.18 リポジトリ 方法 styled-components モジュール内部の DefaultTheme という interface に対して型をつけることで目的を達成できます。 この方法は @types/styled-components のコメントで言及されて
WordPress Theme開発でPHPUnitを使う - Qiita
WordPress Theme開発でもPHPUnitでのテストが行えないかなと思ってたので作ってみました。 wp-theme-phpunit function _manually_load_plugin() { register_theme_directory( dirname( __FILE__ ) . '/../../' ); switch_theme('your-theme'); } ↑ ポイントはここです。your-themeの部分を自身の開発中のTheme名に変更して、PHPUnitを実行させればOKです。 wp-plugin-unittest-dependency-patten ↑ こいつと組み合わせれば、自作のテーマに必要なプラグインもインストールした上でPHPUnitを実行できるようになります。 クライアントに納品用のサイトとかを作るときは、プラグインもそれぞれクライアント
dev.toに匹敵する速度を出せるWordPressテーマを開発した話 - Qiita
本日、無料WordPressテーマ Godios. をリリースしました。 公式サイトを見ていただけるとわかると思うのですがページが一瞬で遷移しています。 どうでしょう、dev.toと同じくらい速いんじゃないでしょうか。 この記事ではテーマを高速化するにあたって用いたテクニックを書いていきたいと思います。 圧縮 テーマに含まれている画像・CSS・JSファイルの圧縮。 画像はOptimizilla・TinyPNG、CSSはCSS Minifier、JSはJSCompressを使用しました。 CSS・JSファイルの遅延読み込み レンダリングをブロックするファイルが大量にあると表示が遅くなりますので、JSファイルはdeferまたはasync属性を付与し、CSSファイルはインライン、またはJSで非同期に読み込んでいます。 無駄なSQLクエリを減らす データベースへのアクセスが多いと負荷が掛かる上、速
WordPress Themes by Automattic
あなたの WordPress サイトにベストなテーマを探しましょう。何千もの美しいデザイン、幅広い様々な機能・カスタマイズオプションなどから選べます。
» 動画まとめサイトのWordPressテーマをオープンソースで公開しました | アダルトサイト制作会社
動画まとめサイトが簡単に作れるテーマ「VideoSummary」 テーマを適用するだけで、動画まとめサイトに多く見られる機能を実現できます。 例えば、「お気に入り」「イイね」「閲覧数順」「カテゴリ」機能が実装されています。 無料で使えます。 動画まとめサイトの実行サンプルサイト サンプルサイトのコンテンツはAV(アニマルビデオ)で集めています。 プラグインは一切不要の設計でテーマをインストールするだけでOK 閲覧数の計測などはPopularPostなど便利なプラグインも存在していたのですが、 公式テーマを目指す為にプラグインに依存させる事は止めました。 シンプルにカスタムフィールドを使った設計ですが、ランキング処理は十分と判断しています。 レスポンシブ対応でスマホでも快適動作 Googleはモバイルファーストインデックスを推奨しており、スマホ対応が重要です。 記事の一行あたりの表示列数をデ
WordPressのテーマ開発を超効率化するためのテーマMimizukuを作りました
先日「WordCamp Tokyo 2016 で「本当に使えるテーマとはどのようなものかを考え続けた結果」というLTをやったけど全然間に合わなかったので補足記事を書きました」という記事を書きまして、その中のスライドで開発中のテーマ Mimizuku の URL を載せていましたが、ある程度形になったので記事を書くことにしました。 Mimizuku の特徴 子テーマ開発用の親テーマ Habakiri で得た知見をもとに開発 レイアウトテンプレートとビューテンプレートを簡単に差し替え static ビューテンプレート get_template_part()に外部変数を渡せる独自テンプレートタグ CSS フレームワーク Basis アイコンフォント 便利 Composer スクリプトいろいろ CI（継続的インテグレーション） 子テーマ開発用の親テーマ テーマの開発手法は主に「フルスクラッチで開発
旧 日本語とテーマ – WordPress Snippet
2014/6/12 現在WordPressのテーマディレクトリにホストされている公式テーマは、2591点ほどになっています。 GPLライセンスで自由に使えるテーマが、選びきれないほどあるように見えますが、 「日本語環境で利用する」という事を考慮した場合、これらすべてのテーマが使いやすいものなのかというと、そうでもなさそうです。 日本語環境で使いやすさを左右する要因 日本語環境をサポートしているテーマ Most Popularのトップ4ページ（60件）で、日本語翻訳ファイル付きのテーマを調べてみました。(2014 6 12 現在のもので、順位は日々変動しています) WordPress日本語版チームがメンテナンスを行ってくれているデフォルトテーマを除き、languageディレクトリに、日本語翻訳ファイル（ja.po,ja.mo)を持っているテーマは 7テーマ/55テーマだけです。 一般のテーマ
ダッシュボードから更新できる国産レスポンシブ WordPress テーマ を紹介
この記事は WordPress Advent Calendar 2015 の 12日目の記事です。 WordPress を使っている皆さま、これから WordPress を使おうと思っている皆さま。テーマ（WordPress のテンプレート）選びは楽しいけれど悩みますよね。 特に思うのは海外製のテーマは英語で見ているとかっこいいけれど日本語にするとイマイチ。もしくは日本語になった時にどうなるか不安ってありませんか？ そんな不安を解消しちゃうべく日本語で見ても美しい WordPress のダッシュボード（管理画面）から更新できるテーマを紹介したいと思います。 目次 日本語で使いやすい美しい無料国産WordPressテーマの紹介 初心者向け：テーマ変更の仕方 中級者向け：JetPackを使ったテーマ編集（CSS編集）の仕方 制作者向け：子テーマの作り方 100%GPLテーマのススメ 日本語で使
WordPress でビジネスサイトを作る時にオススメなテーマ 2015 冬 - Qiita
WordPress でビジネスサイトを作る時に、個人的にオススメなテーマをまとめてみました。まとめる上で意識した条件は以下です。 無料／有料問わず GPL ライセンスである 無料テーマの場合、公式ディレクトリに登録されている JavaScript や CSS でのエフェクトや動きにストレスを感じない 動作が軽い（なるべく） 国産無料テーマ Habakiri Download／Demo Lightning Download／Demo 海外産無料テーマ Edin Download／Demo／Official Site Perth Download／Demo／Official Site Pinnacle Download／Demo／Official Site Bistro Download／Demo／Official Site NovelLite Download／Demo／Official S
WordPressのテーマをTravis CIでビルドする。 | Firegoby
最近のWordPressのテーマ開発はgulpとかを使ったりするので、それを公式ディレクトリに登録する時とか本番環境で使う時には、厳密には不必要なファイルが大量に生成されたりします。 あと、npm installとかでよそから持ってきたファイルも、できればGitには登録しないほうがいいです。 そんなわけで、最近のWordPressのテーマ開発では、不要なファイルの削除とか外から持ってきたファイルを同梱するとか、そういうビルド作業が不可欠になってきました。 この記事のゴール というわけでこの記事では、そういう一連のビルド作業をTravis CIで自動化する方法について紹介します。 ゴールは以下のような感じ。 テーマをmasterブランチにpushするだけでビルドが自動的に発火する。 node_modulesなどのテーマの動作に不要なファイルはビルドしたテーマから削除。 動作に必要なサードパー
第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」を開催しました
おはようございます。 よつばデザイン：後藤さん、コワーキングスペース茅場町：田中さん、InAdvanceonlyの小林さんの４人で主催している「ゼロから始めるWordPress勉強会」を昨日9月17日にコワーキングスペース茅場町で開催しました。 第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」＆質問大会！〜 – Co-Edo WordPress 勉強会 | Doorkeeper 今回のゼロから始めるWordPress勉強会はSassとフレームワークを活用したテーマ作りを勉強します。 Sassって何？ Sassについてゼロから解説いたします（小林） Bootstrapって何 … 最終的に29名もの方々にご参加いただきました。 みなさん、ありがとうございます！ 今回のテーマは「Sass+Bootstrap+_sでテーマを作ろう」 今までは
Tumblrテーマを本気でつくる Vol.2「テーマカスタマイズの独自タグ理解編」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
トップページ 読んで字のごとく、ドメイン直下のトップページのことです。 日付ページ 特定の日付に投稿された記事の一覧を表示するページです。「http://ユーザー名.tumblr.com/day/2015/03/05/」といった形で、年月日を指定したURLとなっています。 タグページ 投稿時にタグを付けることができますが、当該タグが付けられた記事の一覧ページです。「http://ユーザー名.tumblr.com/tagged/タグ名」でアクセスが可能です。 検索ページ Tumblr上の検索機能を使って出る検索結果のページです。「http://ユーザー名.tumblr.com/search/検索ワード」でアクセスが可能です。 記事詳細ページ 各投稿の詳細ページです。基本的には「http://ユーザー名.tumblr.com/post/投稿ID」というURLになっていますが、投稿時に「フレンド
無料で利用できる高品質Bootstrapテーマコレクション「Bootstrap Zero」 | ソフトアンテナ
Twitter社が開発した人気のCSS/JavaScriptフレームワーク「Bootstrap」。誰でも簡単に利用できることが売りですが、一からサイトを作り上げるとなると、それなりに時間がかかってしまうかもしれません。 「Bootstrap Zero」は、そのような時に参考にしたい、高品質なBootstrap用のテンプレートコレクションサイトです。Bootstrap的ではない、美しいデザインのテーマから、Bootstrapっぽさを残したオーソドックスなテーマまで、たくさんのテーマを無料でダウンロードすることができます。 Custom Bootstrap Templates Custom Bootstrap Templatesカテゴリには、Bootstrapっぽさをできるだけなくした美しいテーマが集められています。製品/アプリの紹介サイトや、管理画面に使える、最近よく見かける形式のテーマが揃
超倍速でWordPressオリジナルテーマ作成！骨だけ「Bones」の使い方をザックリと
【発表】WP テーマ選びで悩んでる？ 日本語テーマの比較はこちら。 デモサイトを見ながら使い方とできることを比べられます 【テーマ選び方】8つ比較 「Bones」は、WordPressの「ブランクテーマ」とか、「スターターテーマ」って呼ばれる、カスタマイズ前提のテーマの一つなのだけど、そのカスタマイズのしやすさが他のブランクテーマと比較して圧倒的です。（当人比。ちなみに、その他のブランクテーマは下記リンク先を） 密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ 「Bones＝骨ばっかり」というその名が示す通り、「骨組み」として、自分好みに肉付けしやすく、オリジナルのテーマ作成をビューンとひとっ飛びに高速で進められます。 簡単にまず、優れた特徴をあげてみましょう。 子テーマ不要 よそ様が作ったテーマをカスタマイズする場合、子テーマを用意した方がいいです。直接、元のテーマ
WordPressのテーマをプラグインから変更するためのクラス | Firegoby
例えばWPTouchなどのモバイル表示用プラグインでは、ユーザーエージェントを検出して、テーマファイルを一時的に変更する処理を行っています。 以下で紹介するクラスはこのプラグインの中で使用しているテーマを切り替えるためのクラスです。 使い方 自作プラグインの中で何らかの条件分岐を行い、その条件に従ってテーマを切り替えます。 function is_mobile() { // モバイル端末かどうかを判別する...など } if (is_mobile()) { new switchTheme( 'default', // テーマのディレクトリ名 '/path/to/wp-content/themes', // パス 'http://example.com/path/to/wp-content/themes', // URL ); } switchThemeコンストラクタには以下の引数を設定して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React styled-components の theme に TypeScript 型定義を追加する
WordPress_テーマのつくりかた.pdf
What's New in Twenty Seventeen
40 Awesome and Fresh Wordpress Themes : Speckyboy Design Magazine
Tumblrのオリジナルテーマを作成する為のHTML5製テンプレート・「tumblr boilerplate」
