4

レスポンシブ ワンページ WordPress テーマの作成方法を学べるソースはどこにありますか? メニュー項目をクリックすると下にスクロールします。

これは私が欲しいものの例ですhttp://thememints.com/templates/?theme=Cingle%20WP .

4

5 に答える 5

32

まったく同じ質問があり、検索した後、この投稿を見つけました。

この質問に対する回答を見て、私はかなりショックを受けました。私には、人々は質問をきちんと読まなくてもすぐに質問に答えてしまうように思えます。

すべての寄稿者がレスポンシブおよびパララックス スクロール Web サイトの解決策を提供していますが、本当の質問に答えた人は誰もいません。

広すぎず、曖昧ではありません。彼が尋ねているのは、ワードプレスで単一ページのテーマを作成する方法だけです....これを達成する方法について誰も指示しませんでした.

これらの回答が有用と評価された理由がわかりません。

そこで、試行錯誤を繰り返した結果、単一ページの WORDPRESS テーマをどのように作成するのかという質問に答えるために、以下を見つけました。

理解すべき主要な側面の 1 つは、Wordpress の query-post 機能です。これにより、 home 、 about 、 service 、 content などの複数のページ コンテンツを 1 つのページに投稿できます。

メニュー構造を作成してさまざまなセクションにスクロールするには、このチュートリアルが役立つことがわかりました - create-a-single-page-wordpress-website

これが役立つことを願っています

于 2014-02-05T08:15:14.610 に答える
5

ウィリアム・パットンが言ったように、これは幅広い質問ですが、私が理解できる限り、これが役立つかもしれません:

http://www.designerledger.com/parallax-scrolling-tutorials/ 1 ページのテーマ。

wordpress 開発テーマの基本的な開始:

http://codex.wordpress.org/Theme_Development

更新 :フルスクリーン ページの作成に役立つこの素晴らしいプラグインを見つけました

https://github.com/alvarotrigo/fullPage.js


編集 2016

user3263807 の回答で多数の賛成票が寄せられたため、wordpress 用の小さい/基本的な 1 ページのガイドを作成しました。css/js については、インターネット上に優れたチュートリアルとプラグインがたくさんあります。また、 WordPress のテーマにも精通していると思います。

まず、1 つのページのテンプレート ファイルを作成する必要があります。と呼びましょうtemplate-one-page.php。ファイル内でコメント化されているテンプレート名は、管理パネル内でページを作成するときに [ページ属性] -> [テンプレート] に表示される名前です。その後、ページ、つまりホームを作成し、テンプレートとしてテンプレートを割り当てます。ページをフロント ページとして表示する場合 (mydomain.com に入ると、このページが表示されます)、[設定] -> [閲覧] -> [フロント ページの表示] -> [静的ページ] に移動し、ページをフロント ページとして設定します。

// File Security Check
defined('ABSPATH') OR exit;
/*

Template Name: One Page

*/

?>

通常、1 ページにはセクションがあります。したがって、必要なセクションのタイプを決定したいと思います。ページ、子ページ、投稿、カスタム フィールド ( ACFのリピーターなど) などが考えられます。

<?php
$id = get_the_ID(); // The page id

$sections = get_posts(array('post_type' => 'page', 'post_parent' => $id)); // get all child pages

foreach ($sections as $key => $section):

?>

<section id="page-<?php $section->ID; ?>" <?php post_class('', $section->ID); ?>>
   <h1><?php echo get_the_title($section->ID); ?></h1>
</section>

<?php endforeach; ?>

またはループで

<?php

$id = get_the_ID(); // The page id

$query = new WP_Query( array('post_type' => 'page', 'post_parent' => $id) ); // get all child pages

if($query->have_posts()):
    while ( $query->have_posts() ) : $query->the_post();
?>
        <section id="page-<?php the_ID() ?>" <?php post_class(); ?>>
            <h1><?php the_title(); ?></h1>
        </section>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>

サイトのニーズに応じて、必要なものをクエリできます。

于 2013-10-16T13:56:23.390 に答える
1

これは、必要なテーマから1ページのスクロールWordpress Webサイトを設定する方法を説明する詳細なビデオチュートリアルです. 参加する必要があります - 無料トライアルがあります。これにより、「フードの下をのぞいて」、他の 1 つのページのテーマとプラグインがどのように作成されたかの原則を理解することができます。

http://www.lynda.com/WordPress-tutorials/WordPress-Building-One-Page-Style-Site/169876-2.html

Onesie や OneEngine などのいくつかの既製のテーマを調べたところ、バックエンドで管理するのは悪夢であり、非常にユーザーフレンドリーではないことがわかりました。両方のテーマにいくつかのセクションがある長いホームページのコンテンツは、想定されるように Pages セクションではなく、Appearance フォルダー内の別の管理セクションを通じて管理され、通常の Wordpress インターフェイス コントロールはありません。上記のチュートリアルでは、フロントページのカスタムループによって組み立てられた実際のWordpressページと、組み込みのWordpressメニューと同じように機能するメニューを使用して、適切に扱っています.

于 2014-12-04T22:32:32.633 に答える
1

以下のリンクをご覧ください。

[1] http://www.1stwebdesigner.com/css/responsive-website-tutorial/

[2] http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/

[3] http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~okrhufNGLHp1mh (作成時に留意すべき点)

ありがとう。

于 2013-10-16T13:49:07.673 に答える