HOME
 / カテゴリ「WordPress(応用)」を表示:38件

子テーマの設定方法

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

Bootstrapの導入方法と設定

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

TinyMCEのeditor-style.cssの制限と回避方法

TinyMCEの仕様は親テーマのeditor-style.css➡子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

ビジュアルエディタとHTTP表示を一致させる方法

ビジュアルエディタの表示と、HTTP表示を一致させる為には両方のCSSを合わせる必要があります。しかし、ここで注意しなければならない点は下記になります。①ビジュアルエディタのCSS「editor.style.css」は、コンテンツエリアだけのCSSである。②一方、HTTP表示のCSS「style.css」は、コンテンツエリア以外のヘッダーやページにも使うCSSである。よって両方のCSSを一致させるとは「editor.style.css」の定義を「style.cssのコンテンツ領域」に取り込む事を意味しています。

TinyMCEの基本スペックとカスタマイズ

TinyMCEのデフォルトインデントは「padding-left」を使っている為、p要素と画像しかインデントできません。これを「margin-left」に変更する事により総ての要素にインデントが使えるようになります。この辺のTinyMCEのカスタマイズ方法を解説しています。

TinyMCEにコラップス機能を実装する

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。しかしこの機能はHTMLでコラップスを指定した場合に使える機能で、ビジュアルエディタで編集可能なコラップスにする為には自作jqueryでダイナミックにこの機能を与える必要がある。この方法を解説しています。

TinyMCEに自作のモーダルウィンドウを実装する

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

整形済みテキストと引用の設定と使い方

ここでは整形済みテキストと引用の設定と使い方を解説します。整形済みテキストのポイントは入力ミスを起こさせない為の設定で、引用の場合はデフォルトの引用よりもっとビジュアルな引用BOXを作成しています。

表示デバイスを取得する方法

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

画面サイズを取得する方法

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。