EC-CUBE 4系の機能拡張プラグイン「管理画面WysiwigEditor化機能」を公開しました
当社が開発したEC-CUBE 4系のプラグインが公開されました。無料ですのでお気軽にご利用ください。
https://www.ec-cube.net/products/detail.php?product_id=2378
目次
1. EC-CUBE 4系 管理画面WysiwigEditor化機能はどんなプラグイン?
管理画面のURL(PATH)と、テキストエリアのSELECTORを設定することで、 管理画面内の任意のテキストエリアをWysiwigEditor化することができるプラグインです。
簡単に説明すると、EC-CUBE管理画面内に存在する任意のテキストエリアを、Wordのような少しリッチなエディタに変更するプラグインとなっています。
言葉で説明すると少しわかりにくいので、イメージ画像を用意しました。
デフォルト | プラグイン有効化&設定後 |
社内にマークアップエンジニアの方がいる場合は、商品ページの商品説明やフリーエリアにHTMLやCSSを書いて表現にもこだわることができるのですが、HTMLなどの知識がない場合、商品ページをリッチな見た目に仕上げることは難しいですよね。
通販サイトを運営しているからといって、全ての方がHTMLやCSSを書けるわけではないので、そういった専門的な知識が無い方でもリッチなページを作れるようにできないかと思い、こちらのプラグインを開発しました。
また、WysiwigEditorを使うことで、<h2><h3>といった見出しタグも簡単に追加できるようになっています。見出しタグを使って適切なマークアップを行うことで、SEO面での効果も期待できます。EC-CUBE のSEO対策についての詳しい説明は「EC-CUBE 4系のSEO対策/オープン前にやってほしい項目一覧」をご確認ください。
「商品ページのテキストエリアはWordのようなリッチエディタを使いたいが、新着情報の本文は今まで通りのテキストエリアが良い」といった一部のみ適用したいケースや、「別のプラグインによって追加されたテキストエリアにも、このリッチエディタを適用したい」といった拡張にも対応できるようにしているため、設定方法に少しクセがありますので、そちらについて解説します。
2. 管理画面WysiwigEditor化機能の設定方法
2-1. 管理画面WysiwigEditor化機能の設定画面の見つけ方
「管理画面WysiwigEditor化機能」プラグインを有効化すると、「設定>システム設定>AttachWysiwygEditor」というナビゲーションリンクが表示されますので、移動してください。
※もし表示されない場合は、コンテンツ管理内のキャッシュ管理から、「キャッシュ削除」をお試しください。
2-2. 管理画面WysiwigEditor化機能の設定方法
管理画面WysiwigEditor化機能では、「URL」と「SELECTOR」をセットで登録して、この組み合わせでテキストエリアを検知してリッチエディタ化させる仕組みになっております。
URL | SELECTOR |
管理画面内のリッチエディタ化させたいテキストエリアが存在するページURLを入力します(管理画面のベースパスは除きます) | URL内にあるリッチエディタ化させたいテキストエリアのCSS セレクターを入力します。 |
尚、HTMLやCSSがわからない方向けに、ニーズの高いであろうテキストエリアの箇所については、コピペで設定できるようにヘルプを用意しております。
反映箇所 | URL | SELECTOR |
商品管理>商品登録 [商品説明] 商品編集画面含む |
product/product/ | textarea#admin_product_description_detail |
商品管理>商品登録 [フリーエリア] 商品編集画面含む |
product/product/ | textarea#wysiwyg-area |
コンテンツ管理>新着情報管理 [本文] 新規作成画面含む |
content/news/ | textarea#admin_news_description |
2-3. リッチエディタの動作イメージと表示イメージ
動作イメージ
表示イメージ
4. (株)カジヤでは、EC-CUBE 4系のカスタマイズや通販サイトの運営代行を承っております
当社では、通販サイトの立ち上げからカスタマイズだけでなく、Webコンサルティングや日々の更新業務の代行まで、幅広くサポートを行っております。(参考料金についてはこちらをご確認ください)。
EC-CUBEのカスタマイズやリニューアル、新規オープンのご相談や、通販の売上UP、メディア集客でお困りのことがございましたら、以下フォームよりお気軽にご相談くださいませ。