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

カテゴリー

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 を読み込ませる方法、これは動的スクリプトも可能な方法です。ワードプレスのプラグインで動くシステムを開発していたところ、ユーザーインターフェイスでどう