HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

メニューのカスタマイズプラグインMax Mega Menuでメニューのカスタマイズがめっちゃめちゃ簡単にできた。

スポンサーリンク

殆ど使わないだろうプラグインを見つけちゃいました。

メニューをカスタマイズするプラグイン。

ところが、これがなかなか秀逸。

その名も Max Mega Menu 。


メニューのCSSを設定してくれて、何より助かるのが、メニューをレスポンシブ化をしてくれる。


Max Mega Menu の使い方


プラグインの新規追加で Max Mega Menu をエントリーすると検索に引っかかってくれます。

有効化するとダッシュボードに↓のような設定画面が表れます。




設定画面です。


General Settings



Click Event Behaviour


クリックイベントの動作を指定します。
  • First click will open a sub menu, second click will close the sub menu.
    最初にクリックするとサブメニューが開き、2回目にクリックするとサブメニューが閉じます。
  • First click will open a sub menu, second click will follow the link.
    最初のクリックはサブメニューを開き、2番目のクリックはリンクをたどります。


Mobile Menu Behaviour


モバイルメニューの動作
  • Standard – Open sub menus will remain open until closed by the user.
    標準 – 開いているサブメニューは、ユーザーが閉じるまで開いたままです。
  • Accordion – Open sub menus will automatically close when another one is opened.
    アコーディオン – 開いているサブメニューは、別のメニューを開くと自動的に閉じます。


CSS Output


CSS出力
  • Save to filesystem
    ファイルシステムに保存する
  • Output in head
    <head>部へ出力
  • Don’t output CSS
    CSS を出力しない


Menu Item Descriptions


メニュー項目の説明の出力
  • Disabled
    有効にしない
  • Enabled
    有効にする


Unbind JavaScript Events


JavaScriptイベントのアンバインド。テーマメニューシステムがバインドしているjavascriptとのバッティングを回避するため、メニュー項目に追加されたJavaScriptイベントを削除
  • Yes
    イベント削除
  • No
    削除しない


Prefix Menu Item Classes


カスタムメイドのアイテムクラスに ‘mega-‘を付ける。クラス名のバッティングを避けるためにプレフィックス(接頭文字)をつける。
  • NO
    つけない
  • YES
    つける


Active Menu Instances


1ページに複数メニューがあった時の挙動
何個目のメニューに対しアクティブにするか。


Menu Themes


メニューのデザインを設定できます。

Select theme to edit


ターゲットとするメニューを選択できます。

General Settings

全体のデザインを設定します。

Menu Bar

メニューバーのデザインを設定します。

Mega Menus

Max Mega Menu のデザインを設定します。
Max Mega Menu のウィジェット型メニューは、様々なタイプのメニューが準備されていて、ちょっと使い勝手のいいメニューを作り、配置することができます。

Flyout Menus

ユーザーが列ヘッダーの上にマウスを置いたときにのデザインを設定します。

Mobile Menu

モバイルのデザインを設定します。

Custom Styling

CSSを設定することができます。


スポンサーリンク

関連記事

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横

vba タスクに IE が残る

vba タスクに IE が残る vba タスクに IE が残る。VBAでブラウザ経由でサイトのページの情報を拾い上げる技は結構使いますよね?私だけ?wwwそうすると、なぜかvba タスクに IE が残っていて、繰り返し利用するとどん

wp datepicker 特定の項目で動かない。

wp datepicker 特定の項目で動かない。 ワードプレスでつかえる datepicker は、とっても簡単につかえて便利なライブラリーです。javascript は、なれないとデバッグに時間がかかり気持ち的にすごく敷居が高い気がしますがわかって

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方 ワードプレスのプラグインを書いていると、HTMLタグを入力できるフィールドを作りたくなりますよね?例えば、ページにデータを表示するときにその書式を入力さえるとか。例えば、これはワードプレスのプラグイン

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる ワードプレスのフッターにあるjQueryの読み込みをヘッダーで出力させる必要ができました。simplecity の後継ともいわれる ワードプレスのテーマ cocoon のカスタマイズです。cocoon

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK) ワードプレスで jQuery の後に script を読み込ませる方法、これは動的スクリプトも可能な方法です。ワードプレスのプラグインで動くシステムを開発していたところ、ユーザーインターフェイスでどう