1

最終的には自分のシングルページのワードプレステーマを開発したいので、これがどのように行われるのか興味があります。

すべてが1つのページにあるが、下にスクロールするだけのテーマを見てきました。新しいメニュー項目（またはページ）を追加すると、ページに新しいcssセクションが追加されます。このテンプレートデモで例を見ることができます：Wordpress In-Motionテーマご覧のとおり、メニューリンクをクリックすると、そのセクションに移動します。cssに#newsまたは＃about-usを追加します

ワードプレスのテーマをデザインするときに、これが関数としてどのように作成されるかを誰かに説明してもらえますか？サム

4

3 に答える 3

2

これに対する答えを得ました。これを私のindex.phpページに追加しました（少し変更しました）。追加するページごとに、jqueryを使用してアンカーできる新しいものが追加されます。もちろん、独自のクラスとIDをn個追加して、divの外観を制御できます。

<?php
$pages = get_pages( array ( 'sort_order' => 'asc', 'sort_column' => 'menu_order', 'depth' => 1));

        foreach ( $pages as $page ) {  
            $page_section = str_replace( " ", "", strtolower( $page->post_name ) );
            echo '<div id="' . $page_section . '" ></div>';
        }
?>

これが誰かに役立つことを願っています、サム

于 2012-11-10T11:55:15.680 に答える
1

これはJavaScriptで行われます。私の知る限り、彼らはonePageNavと呼ばれるjQueryプラグインを使用しています。このプラグインは、選択したメニューセクションへのスクロールダウンと、currentスクロールダウン中の正しいメニュー項目へのクラスの追加を処理します。

于 2012-11-08T14:10:09.387 に答える
1

それはWordpessとは何の関係もありません。それは単にあなたをページの下または上に連れて行くためにアンカーを使用しているだけです。

ページ上の要素に一意のIDがある場合は、そのIDにリンクするアンカータグを作成できます（ページ上でそこに移動します）

例えば

<div id="anchor">...</div>
<div id="something-else>...</div>

<a href="#anchor">Click here to go to id=anchor div</a>
<a href="#something-else">Clicker to go to something-else id div</a>

例を挙げたWordpressテーマには、JavascriptまたはjQueryスムージングも含まれていました。そのため、プレーンHTMLのように即座にそこに移動するのではなく、アンカーまで適切にスクロールします。

于 2012-11-08T14:13:14.587 に答える