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

Max Mega Menu プラグインウィジェットをサイドバーで使う

スポンサーリンク

Max Mega Menu プラグインウィジェットをサイドバーで使うことで、メニューをサイドバーに張ることができるようになる。

つまり、グローバルメニューとサイドバーメニューの2つのメニューを作って一つはグローバル、もう一つはサイドバーにという形。

メニューごとの Max Mega Menu は、メニューの配置位置が存在していないと設定することができない。


Max Mega Menu ウィジェットでメニューをサイドバーで使う


手順は
1、Max Mega Menu の配置のために メニューの配置位置を追加する
2、ウィジェットで Max Mega Menu のウィジェットを配置する
3、Max Mega Menu でテーマデザインをカスタマイズする

Max Mega Menu の配置のために メニューの配置位置を追加する


Max Mega Menu の配置のために メニューの配置位置を追加するには、 function.php に以下を貼り付けます。

register_nav_menu( 'sidebar-navi', 'サイドバーのナビゲーション' );

sidebar-navi:配置のためにシンボル
サイドバーのナビゲーション:表示名

これだけでOK。

ex.
// サイドバーウィジットを有効化
register_sidebar( array(
'name' => 'サイドバーウィジット-1',
'id' => 'sidebar-1',
'description' => 'サイドバーのウィジットエリアです。',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
) );
register_nav_menu( 'sidebar-navi', 'サイドバーウィジット-1' ); // ← これ。表示名だからなんでもいい。サイドバーのname を使ってみた。


header.php などに埋め込む場合


ワードプレスのテーマにグローバルナビを埋め込む場合は、以下のようにしておきます。
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>


ウィジェットで Max Mega Menu のウィジェットを配置する





Max Mega Menu でテーマデザインをカスタマイズする


Max Mega Menuは、基本的に横置きメニューのカスタマイザーなのでサイドバーに配置すると横に並ぼうとする。

そこで必要になるのが CSS の設定。 Max Mega Menu の li のfloat を解除するのは面倒なことになるので、

メニューの1項目の幅を100%にして、無理やり改行させてやる。

Max Mega Menuから「menu themes」を選択


「Select theme to edit」のところから新しいデザインを作る「create a new theme」をクリック。


色味他は、とりあえずほっといて「Custom Styling」で Max Mega Menu の li のスタイルを変更する。
/** Push menu onto new line **/
#{$wrap} {
clear: both;
}
/* li の 幅 を 100% にする*/
#{$wrap} #{$menu} > li.mega-menu-item {
width: 100%;
}

サンプル画像(笑)


あとは、色とか幅を調整してこんな感じにできました。


上のやつの 追加CSS
/** Push menu onto new line **/
#{$wrap} {
clear: both;
}
/* li の 幅 */
#{$wrap} #{$menu} > li.mega-menu-item {
width: 100%;
margin:0px 0 3px 0;
border:1px solid #2A8E84;
}
/* li > a の キャラクタセット (muneで1つづつ設定させない)*/
#{$wrap} #{$menu} > li.mega-menu-item > a::before{
content: '\f345';
}
#{$wrap} #{$menu} {
margin:0;
padding:0;
}



Max Mega Menu の配置方法


前述は、ウィジェットエリアを作って配置する方法ですが、 Max Mega Menu は、そのほか、投稿にも配置でき、php ソースに直接配置することもできます。

ただし、メニューとMax Mega Menuを結び付けなければいけないのでメニューの配置位置の設定は必要になります。

php 直埋め込み、投稿埋め込みのタグは、ここを見れば書いてあるので、あとはコピペすればOK。

すごく手軽です。


スポンサーリンク

関連記事

スポンサーリンク

よく使うタグ

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

カテゴリー

MW WP FORM のフックが効かない。

MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利~とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある

MW WP FORM のショートコードで出力される内容をカスタマイズする。

MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール

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

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

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

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