WordPrssのエディタにCSSを反映しマークアップスタイルを追加する
WordPressで記事を投稿する際に、標準で搭載されているエディタは自動でコードを入れてくれたりボタン一つで好きなコードを挿入できたりして便利で使用している人も多いと思います。 エディタをもっと使いやすくするために、実際に投稿される記事と同じCSSが反映されるようエディタースタイルシートを有効化し、それに加えてボタン一つで記事にデザインを追加できるマークアップスタイルを設定してエディタの機能を強化しましょう。 今回は、WordPressのエディタにエディタースタイルシートとマークアップスタイルを追加する方法についてご紹介します。 エディタースタイルシートを使用できるようにする まずは、エディタースタイルシートを使用できるようにするためにWordPressのテーマの高に新しく『editor-style.css』というテンプレートを作成してください。 『editor-style.css』は、
WordPressのビジュアルエディタ表示を実際に公開されるページ表示に近づける方法 | 福岡のホームページ制作会社 | シンス株式会社
WordPressで記事の新規投稿や編集を行うときに使用する編集画面。 記事本文を入力する部分はビジュアルモードとテキストモードの切り替えが可能で便利です。 ただビジュアルモードのデフォルトスタイルは、実際にホームページ上で表示される見た目と異なったりしますよね。 うーん、いまいちサイト表示と違うんだよなぁ… 今回はWordPressの記事編集時の画面をサイト表示と同じように変更するカスタマイズ方法をご紹介します。 ビジュアルエディタ用のスタイルシートを用意しようまずはビジュアルエディタで入力したコンテンツに適用するスタイルシートを準備します。 テーマフォルダ直下にeditor-style.cssというファイルを用意して、投稿するコンテンツに反映されるCSSをコピーします。 この時の注意点として、余計なclassなどはそのままコピーしてこないようにしましょう。 例えば、サイトで記事を表示す
wordpressでテンプレートフォルダのパスをショートコードに登録するぜ完全版 | DAICHIFIVE blog
2010年11月16日 記事内でテンプレートフォルダまでのパスを表示させるためのショートコードを登録する方法。 テーマフォルダ内の画像を掲載したい！ wordpressの投稿記事本文の中で、テーマフォルダ内の画像を使いたいときがあると思います。 僕の場合、企業サイトをwordpressで構築するときに、そういったケースがちょこちょこあります。通常、静的なページはwordpressの投稿ではなく「ページ」として作成しますが、ページ本文の中で使用する画像を、普通に投稿画面からアップしてしまうと、クライアントが記事を編集する際などに、間違って削除してしまう可能性があります。だから、クライアントが削除できない場所である「テーマフォルダ」内に画像を入れておき、その画像をページ本文の中で使うという手法を使います。 画像のパス・・・どうする？ ・・・だが、ちょっと面倒なことが起きます。テンプレートフォル
WordPress開発環境を本番と同期する方法、まとめ。 | WWWクリエイターズ
１点、注意が必要なのが、「テスト環境と本番環境で必ずホスト名（ドメイン、URL）が異なる」という点です。これはどうあがいても一致させる事はできません。（できなくは無いですが、やりたくない・・） こちらはあとで対応方法を記載します。一つづつ見ていきます。 SQLを同期する 最初にSQLですが、実際はこれが一番厄介です。 WordPressのデータには、何故かホスト名が紛れ込んでいます。ホスト名が紛れ込むのは（特殊なプラグインの事を忘れれば）以下のような値です。 optionsテーブル：home、siturl postテーブル：post_content postテーブル：GUID その他の値 基本的にはすべて、DBを操作して<ドメインA>文字列を<ドメインB>に置換してやれば大丈夫な気がしてしまますが、そうも行きません。補足していきます。 Wordrpessの知っておくべきSQLのフィールド
WordPress のスターターテーマ Sage のベータ版がリリース – Capital P – WordPressメディア
WordPress のテーマを一から書くのはほんとうに大変な作業で、そのための雛形となるプロジェクトがいくつかあり、それらはスターターテーマと呼ばれています。 これらのスターターテーマの中で、もっとも日本で有名なものはたぶん _s だと思います。 https://underscores.me/ 今回、紹介するのは、同じく有名なスターターテーマのひとつ Sage です。 https://roots.io/sage/ Sage とは Sage とは、Roots 社が開発しているスターターテーマで、単純に GitHub のスターの数で比較すると、_s よりも知名度があるプロダクトかもしれません（_s のスターは 7,139 で、Sage は 7,945）。 https://roots.io/sage/ なぜこのスターターテーマがこれほど有名かというとその理由の一つにアメリカ政府で採用されたことが
WordPressのテーマ開発を超効率化するためのテーマMimizukuを作りました
先日「WordCamp Tokyo 2016 で「本当に使えるテーマとはどのようなものかを考え続けた結果」というLTをやったけど全然間に合わなかったので補足記事を書きました」という記事を書きまして、その中のスライドで開発中のテーマ Mimizuku の URL を載せていましたが、ある程度形になったので記事を書くことにしました。 Mimizuku の特徴 子テーマ開発用の親テーマ Habakiri で得た知見をもとに開発 レイアウトテンプレートとビューテンプレートを簡単に差し替え static ビューテンプレート get_template_part()に外部変数を渡せる独自テンプレートタグ CSS フレームワーク Basis アイコンフォント 便利 Composer スクリプトいろいろ CI（継続的インテグレーション） 子テーマ開発用の親テーマ テーマの開発手法は主に「フルスクラッチで開発
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
デジタルコンテンツのダウンロード販売に特化したECサイト向けのWordPressプラグイン・Easy Digital Downloads - かちびと.net
珍しいタイプだし、普及して欲しいな、 という願いも込めて記事にします。デ ジタルコンテンツの販売に特化した、 ECサイトを構築できるWordPressのプラ グイン、Easy Digital Downloadsです。 こういうのも無料なのがWPのいい所。 まだ出来たばかりなので日本語ファイルもありませんが、多言語化は可能なので自分で作ってみようかと思いますが、その前に普及を願ってご紹介です。 デジタルコンテンツ・・今ならいろいろ思いつくのでは無いでしょうか。電子書籍やフォント、写真、アイコン、やWordPressのテーマなんかもそうですね。こういったデジタルコンテンツの販売に特化したECサイト用プラグインです。 軽く使用してみた感じなので何ともいえませんが、直感的には手軽に使えそうに感じました。 スクリーンショット プラグインを有効化すると、カスタム投稿タイプを追加したようにメニューに項目
WordPressで会員制サイト構築 フロントエンドユーザー管理プラグイン - WordPressのプラグイン販売サイト CMS×WP
サポート： このプラグインの使用方法などについてメールでのお問い合わせにお答えします。 価格： プレミアムサポートオプション：88,000 円（税込）／一年毎継続課金 プレミアムサポートオプション：11,000 円（税込）／30日毎継続課金 サポートオプション（30日間）：5,500 円（税込） ダウンロード期間 プレミアムサポートオプション：ご契約中ご購入商品はいつでもダウンロード、自動アップグレード可能です。 サポートオプション（30日間）：30日間（アップグレードコードを発行しますので自動アップグレードもご利用いただけます。） 注意： プラグイン本体を購入している必要があります。 返品： 購入後返品不可 フロントエンドユーザー管理プラグインは、会員制サイトを簡単に構築することができるWordPressのプラグインです。WordPressのデフォルトではできないウェブサイトの表側（フロ
有料会員制サイトを作成する – フロントエンドユーザー管理プラグインの活用事例３ | WordPressのプラグイン販売サイト CMS×WP
WordPressで有料会員制サイトを作成する – フロントエンドユーザー管理プラグインの活用事例３ - WordPressのプラグイン販売サイト CMS×WP WordPressで会員制サイトを構築する – フロントエンドユーザー管理プラグインの活用事例２で、WordPressをベースにフロントエンドユーザー管理プラグインを使用して会員制サイトを構築する方法を解説しました。 今回は会員制サイトを有料化し、料金・会費を払ったユーザーのみにコンテンツを閲覧させる有料会員制サイトをWordPressで作成する方法を考えてみます。 有料会員制サイト構築には、ネットショップ管理プラグインを合わせて使用する必要があります。 会員制サイトの種類 さて、会員制サイトにはどのようなものがあるでしょうか。 ニュースや情報を有料で配信するサイト ファンクラブやサークルのような会員限定向けのサービスを提供するサ
WordPressで会員制サイトを構築できるプラグイン3個を比較【日本語対応】
WordPressで会員制サイトを構築できるプラグインを紹介します。 管理画面の大部分が日本語化されており、日本語の環境でも運用しやすいプラグインを厳選しました。 これらのプラグインを活用すれば、WordPressに会員制サイトを運用するためのコンテンツ管理機能と会員管理機能を拡張して、会員制サイトに登録した会員だけが保護されたコンテンツを閲覧できるように制限を設けることができます。 プラグインの基本機能が無料で提供されており、拡張機能が有料販売されています。 全ての機能を無料で利用できる訳ではありません。 便利な機能が多いので、プラグインの機能が気に入ったら、有料の拡張機能を購入を検討してみましょう。 それがプラグイン開発者の支援にも繋がります。 プラグインごとに機能や特徴が異なります。 どのプラグインも非常に高機能なので、自分の利用目的に合うプラグインを探してみましょう。 はじめに 選
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
後戻りはできる！WordPressの過去記事すべてを一括で置換する方法 - あなたのスイッチを押すブログ
ブログを始めた当初と今とでは、知識レベルも技術レベルも大きく違います。そうすると気になりだすのは、過去の記事。 無知だったからこそ変なHTMLを書き続けた時期があり、気になり出したら止まらないんです。 例えば私の場合、＜h3＞タグの直後には必ず「■」を入れていました。 これは前の見出しデザインの関係で、■を入れておいた方が見やすかったためです。しかしCSSを調整したことで、この■が不要になりました。 さて困ったのは、過去の記事。今までずっと「＜h3＞■」という形で書いてきて、それを今更「＜h3＞」に変える。過去の記事すべてを手で修正するのは途方も無い労力です。 しかし、それを一発で変更できる超便利ツールが一つ。「Search Regex」というWordPressのプラグインです。 Search Regexとは？ WordPressのプラグイン「Search Regex」。これはすべての記事
【要保存】WordPressでブログも管理画面も真っ白になった時に最初にすべきこと
突然画面が真っ白に 管理画面が文字通り真っ白になってしまい何も表示されない。 ビックリしてブログを表示させようとしたが、ブログも真っ白。何も表示されない。 えーとえーとえーと…。 これは今までにないパターンだ。管理画面もブログも真っ白では、どうしようもない。何もできない。 思わずWordpressを丸ごと再インストールしようかと考えてしまったが、ふと冷静になった。 「ファイルが消えてしまっているわけではあるまい。冷静に対処しよう」 そうなのだ。Wordpressやテーマにはたくさんの手を加えている。何も考えずに再インストールなどしてしまうと、カスタマイズした箇所が消えてしまう。落ち着こう。 とにかく自分のサイトは真っ白でどうにもならないので、まずはFTPクライアント “Fetch”でサーバ自体がぶっ飛んだりしていないことを確認。もちろん問題なかった。 真っ白は「エラーを表示させる」設定で脱
WordPress のカスタムフィールド・投稿タイプ・タクソノミーを使い分けよう！
12月25日まで毎日ブログをつないでいく WordPress Advent Calendar、7日目担当マクラケン直子 (@naokomc) です。なつき（@Stocker_jp）さんの人気記事「Croppyの作り方」に引き継いでいただきました！ドキドキ。 カスタムフィールドとカスタムタクソノミーについてはなつきさんの記事でも触れられていますが、WordPress で使える便利な拡張機能として、 カスタム投稿タイプ カスタムタクソノミー（カスタム分類） カスタムフィールド といったものがあります。どれもこれもカスタムカスタムとうるさいですが、名前を見ただけでは違いがよく分からない…ですよね。これらについて意外と知られていないところもあると思うので、それぞれどういう時に使うのか、どうやって使うのかという全体像を説明してみます。 目次 使い方のちがい それぞれのメリット 使い方の基本 使いどこ
WordPress逆引きLIG辞典！過去のお役立ち記事をまとめました。 | 株式会社LIG
LIGライターになる以前はLIGサイトを辞書代わりに使っていたライター内藤です。 LIGでは、Web制作の現場で実際に使われている技術をブログとして公開しています。 今回は、過去に公開されたWordPress関連の記事を目的別にまとめてみましたので、辞書代わりに使ってみてください。きっと役に立つこと請け合いです。 （このページをブックマークしておくか、Evernoteに保存しておくのがお勧めです。） 索引 ユーザの更新作業をスムーズにする(管理画面のカスタマイズ) サイト管理者の運用効率を高める Webサイトの価値を高める 多彩なWebサイト構築のための技術 パフォーマンスとセキュリティを高める トラブル(不具合)対処 サーバ関連 WordPressの書籍 ユーザの更新作業をスムーズにする(管理画面のカスタマイズ) 記事投稿がしやすくする WordPressでクライアントのために出来る
ノンプログラマーのための WordPressセキュリティ入門
ノンプログラマーのための WordPress セキュリティ入門 2013/08/31 WordFes 2013 in Nagoya 宮内 隆行 @miya0001 http://bit.ly/wordfes 自己紹介 和歌山県の串本町というところから来ました！ 実は愛知県の大府市出身です！ プラグインを作って公式ディレクトリで公開しています。 http://profiles.wordpress.org/miyauchi このスライドは以下のプラグインで作りました。 http://firegoby.jp/wp/presenpress 今日のおはなし WordPressを安全に運用するための ノウハウについてお話します！ プログラミングの話はしないです！ 主にレンタルサーバーを想定したお話です。 初心者のみなさんを対象にしたお話です。 パーミッションのお話 なにはともあれ安全
WordPress初心者向け セキュリティ強度をできる限り上げる方法｜More Access! More Fun
【緊急】WordPressでスマホ用WPtouch使ってる初心者は注意です というエントリー書きましたら、「どういうことに気をつけたらもっとセキュリティが上がるのでしょう」というお問い合わせを何人もの方からいただきました。わたくし、エンジニアではないのですが、わかる限りで対策を書かせていただきます。セキュリティ対策はユーザーID変えたから大丈夫、みたいなように考えると逆に危険。WordPressの場合、ユーザーIDはその気になればいろいろなところに出てくるので、機械的にアタックしてくる場合は別として、じっくりソースとか読まれてきたら同じです。 まず、WordPress搭載のサイトに対する執拗な攻撃は、一般的にはブルートフォースアタックと呼ばれております。 ブルートフォースとは、アタッカーがユーザー名とパスワードの組み合わせをランダムに入力し、ログインできるまでこれを繰り返すという攻撃手法。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LWPデモサイト | プラグインLiterally WordPressのデモサイト
WordPressで企業サイトをつくる時に入れておきたいプラグインまとめ - 株式会社bridge
