web-dev-qa-db-ja.com

カスタムメニュー/ウィジェットエリアを作成する

私は次のサイトのように/ menu/widget領域を作成しようとしています：

http://www.Microsoft.com/en-gb/default.aspx

ダウンロード、セキュリティ、サポートに関するセクションを参照してください。

これもフッターメニューと見なされますか。私のテーマのフッターメニューは、サンプルサイトのようにテーマの右下隅にある標準的なメニューですが、そのすぐ上に似たような領域を作成したいと思います。

ありがとう

custom-fieldmenuswidgets
1
f11

Twenty Elevenテーマ、または子テーマをサポートする別のテーマを使用していると仮定します。カスタムテーマを使用している場合は、既存のFunctions.phpを編集してそこに追加機能を追加してから、既存のStyle.cssを編集できます。しかし、あなたの状況が違う場合は、投稿してください。あなたが使っているどんなテーマでも使えるようにアップデートします。

2012年12月現在、このサイトのフッターは一例です。 http://dev.artbeforehygiene.com/

  1. / wp-content/themes /内のディレクトリにtwenteleven-childという子テーマを作成します（または、呼び出したいものは何でも、その目的のためにその名前を使用します）。これらのステップ）
  2. そのディレクトリにfunctions.phpとStyle.cssの2つのファイルを作成します。

  3. Style.cssに次のコードを追加します。

    /*
Theme Name: Twentyeleven Child: Triple Footer Addition
Description: Child theme for the twentyeleven theme with footers 
that look like http://www.Microsoft.com/en-gb/default.aspx
Author: [Your Name Here], Will Lanni
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");
/* Style Twentyeleven Footer to resemble Microsoft site */
#colophon {
    background: #eee;
}
#site-generator,
#supplementary {
    background: transparent;
}
#supplementary h3 {
    font-family: "wf_SegoeUI","Tahoma","Verdana","Arial","sans-serif";
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.25em;
    margin-bottom: 0.65em;
    color: #1a1a1a;
    text-transform: none;
}
#supplementary ul.menu {
    list-style-type: none;
    margin: 0 0 1.5em;
    padding: 0.25em 0 0.5em;
}
#supplementary ul.menu li {
    padding-bottom: .7em;
    font-size: .9em;
}

#supplementary ul.menu li a {
    font-weight: normal;
    color: #1570A6;
    transition: color 0.1s linear 0s;
}
#supplementary ul.menu li a:hover {
    color: #083947;
}

  4. Functions.phpに、次のコードを追加します（これにより、WP Dashboard> Appearance> Menus内で制御できる多数の追加のナビゲーションメニューが作成されます）。 Twentyelevenにはすでに3つのフッターウィジェット領域があります。ただし、テーマにテーマが1つしかない場合は、以下の[フッターの追加]コードのコメントを外してフッター領域を追加できます。

    <?php

// register additional custom menu slots
function childtheme_register_menus() {
    if ( function_exists( 'register_nav_menu' )) {
        register_nav_menu( 'footer-1st-menu', '1st Additional Footer Menu' );
        register_nav_menu( 'footer-2nd-menu', '2nd Additional Footer Menu' );
        register_nav_menu( 'footer-3rd-menu', '3rd Additional Footer Menu' );
        register_nav_menu( 'footer-4th-menu', '4th Additional Footer Menu' );
        register_nav_menu( 'footer-5th-menu', '5th Additional Footer Menu' );
    }
}
add_action('init', 'childtheme_register_menus');

/*
Create additional footer areas ONLY IF THEY DON'T EXIST!!!
Just uncomment out the add_action... but...
If you're using twentyeleven, these are already there, just leave this alone!
*/
//add_action( 'widgets_init', 'childtheme_widgets_init' );
function childtheme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Footer Area One', 'twentyeleven' ),
        'id' => 'sidebar-3',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer Area Two', 'twentyeleven' ),
        'id' => 'sidebar-4',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer Area Three', 'twentyeleven' ),
        'id' => 'sidebar-5',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
}

?>

  5. [表示]> [メニュー]でフッターメニューを作成します。必要なフッター内のサブメニューごとに1つのメニューを作成します。必ず保存してください。

  6. 左側のドロップダウンスロットの1つにそれらのメニューの1つを追加してください。保存する！
  7. 外観>ウィジェットに移動します。
  8. カスタムメニューウィジェットをいずれかのフッタースロットにドラッグし、適切な名前を付けて、表示するナビゲーションメニューを選択します。
  9. 追加したい他のメニューについても繰り返します。
  10. あなたのサイトを保存して見よう！
2
Will Lanni

参考までに、あなたが探しているべき/ googlingしているものは、通常「メガメニュー」と呼ばれています。

CodeCanyonにはそれを手助けするためのプラグインがいくつかありますが、そのためのWordpress.org上のプラグインはありません。

いかなる解決策も支持するのではなく、例として： http://codecanyon.net/item/mega-menu-reloaded/1593152

また、WPMU http://wpmu.org/create-highly-customized-and-beautiful-mega-menus-for-wordpress/ でこの記事を見渡すこともできます。

0
jb510