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:ユーザー入力補助

カテゴリー

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ)

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルサーチコンソール。別にグーグルのサーチコンソールでなくてもいいんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せなくしたキーワ

FB 広告 最適化~グーグルのアクセス解析の基本

FB 広告 最適化~グーグルのアクセス解析の基本 FB広告を最適化するためには、アクセス解析が重要なカギを握ります。FB広告から当該ページに飛んでくるときURLにオプションを付けることができます。このURLにつけたオプションを使ってどの広告から、どん

jQuery ボタンを押しても反応しない

jQuery ボタンを押しても反応しない jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。一瞬はまってしまうことって・・・ありますよね?例えば、こう書きます。popup.

WP パーマリンク リダイレクト インターナルサーバーエラー

WP パーマリンク リダイレクト インターナルサーバーエラー WP パーマリンクのリダイレクトがインターナルサーバーエラーを起こすようになった。ユーザーさんのサイトなので「なにをしたか」わからない。WP パーマリンク リダイレクト インターナルサーバーエラーのい