Merge pull request #96 from stef-k/vertical-one-page
add vertical layout template - Great @stef-k ! Thx will try it by myself for understrap.com!
This commit is contained in:
Holger
GitHub
commit
71d7614066
29
README.md
29
README.md
|
|
@ -149,6 +149,7 @@ http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
|
|||
- WooCommerce support.
|
||||
- [Child Theme](https://github.com/holger1411/understrap-child) ready.
|
||||
- Translation ready.
|
||||
- Multiple Page Templates
|
||||
|
||||
## Starter Theme + HTML Framework = WordPress Theme Framework
|
||||
|
||||
|
|
@ -211,6 +212,34 @@ The front-page slider is widget driven. Simply add more than one widget to widge
|
|||
- Add two, or more, widgets of any kind to widget area “Hero”.
|
||||
- That’s it.
|
||||
|
||||
## Page Templates
|
||||
|
||||
### Blank Template
|
||||
|
||||
The `blank.php` template is useful when working with various page builders and can be used as a starting blank canvas.
|
||||
|
||||
### Empty Template
|
||||
|
||||
The `empty.php` template displays a header and a footer only. A good starting point for landing pages.
|
||||
|
||||
### Full Width Template
|
||||
|
||||
The `fullwidthpage.php` template has full width layout without a sidebar.
|
||||
|
||||
### Vertical One Page Template
|
||||
|
||||
The `vertical-one-page.php` template displays all pages (except the one showing the posts) in a single vertical layout with a sliding navigation.
|
||||
Additionally enables the user to control the order of each page by using the order page attribute field.
|
||||
|
||||
#### One Page Template How to
|
||||
|
||||
1. Assuming that you have the following pages: Home, About and Contact
|
||||
2. Go to Appearance → Menus and add one **custom link** for each page
|
||||
3. On the URL field type a hash `#` and the name of the page in **lower case** so for example the link for Home becomes `#home`
|
||||
4. Edit the Home page and set as template the **Vertical One Page** (you only need to do this for the first page)
|
||||
5. Set the order of each page using the **Order** field from **Page Attributes** so for example if you want to display Home,
|
||||
Contact, About set the Home page to 1, the Contact to 2 and About to 3
|
||||
|
||||
[1] Visit [http://browsersync.io](http://browsersync.io) for more information on Browser Sync
|
||||
|
||||
Licenses & Credits
|
||||
|
|
|
|||
|
|
@ -13,6 +13,21 @@ function understrap_scripts() {
|
|||
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
||||
wp_enqueue_script( 'comment-reply' );
|
||||
}
|
||||
|
||||
// menu - vertical page association
|
||||
if ( is_page_template( 'page-templates/vertical-one-page.php' ) || is_home() || is_single() ) {
|
||||
wp_enqueue_script( 'vertical-one-page', get_template_directory_uri() . '/js/vertical-one-page.js', array( 'jquery' ), '0.4.8', true );
|
||||
$page_for_posts = strtolower( get_the_title( get_option( 'page_for_posts' ) ) );
|
||||
$home_url = home_url();
|
||||
$is_single = is_single();
|
||||
$vars = array(
|
||||
'pageForPosts' => $page_for_posts,
|
||||
'homeUrl' => $home_url,
|
||||
'isSingle' => $is_single
|
||||
);
|
||||
wp_localize_script( 'vertical-one-page', 'vars', $vars );
|
||||
}
|
||||
// menu - vertical page association end
|
||||
}
|
||||
|
||||
add_action( 'wp_enqueue_scripts', 'understrap_scripts' );
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* Vertical page navigation
|
||||
* A temporary source file providing smooth scrolling navigation to Pages
|
||||
*/
|
||||
(function( $ ) {
|
||||
var currentPage = location.href;
|
||||
var adjustedHeight = $( 'body' ).hasClass( 'admin-bar' ) ? 36 : 0;
|
||||
var blogPage = vars.homeUrl + '/' + vars.pageForPosts;
|
||||
if ( currentPage.substr( -1 ) === '/' ) {
|
||||
currentPage = currentPage.substr( 0, currentPage.length - 1 );
|
||||
}
|
||||
|
||||
$( document ).ready(function() {
|
||||
// smoothly scroll to an ID
|
||||
$( 'a[href*="#"]:not([href="#"])' ).click( function ( e ) {
|
||||
var target;
|
||||
// if not on root URL
|
||||
if ( currentPage === blogPage || vars.isSingle ) {
|
||||
target = $(this);
|
||||
target = vars.homeUrl + '/' + target[0].hash;
|
||||
location = target;
|
||||
}
|
||||
target = $( this.hash );
|
||||
target = target.length ? target : $( '[name=' + this.hash.slice(1) + ']' );
|
||||
if ( target.length ) {
|
||||
|
||||
$( 'html, body' ).delay( 100 ).animate({
|
||||
scrollTop: target.offset().top - adjustedHeight
|
||||
}, 800);
|
||||
// put the hash in location bar
|
||||
window.history.pushState( null, null, e.delegateTarget.href );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
})( jQuery );
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<?php
|
||||
/**
|
||||
* The template used for displaying page content in a vertical layout
|
||||
* The template modifies Article's ID by using post's slug to lower case as anchor point.
|
||||
* @package understrap
|
||||
*/
|
||||
?>
|
||||
|
||||
<?php global $post ?>
|
||||
|
||||
<article id="<?php echo strtolower( $post->post_title ); ?>" <?php post_class(); ?>>
|
||||
|
||||
<header class="entry-header">
|
||||
|
||||
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
|
||||
|
||||
</header><!-- .entry-header -->
|
||||
|
||||
<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
|
||||
|
||||
<div class="entry-content">
|
||||
|
||||
<?php the_content(); ?>
|
||||
|
||||
<?php
|
||||
wp_link_pages( array(
|
||||
'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
|
||||
'after' => '</div>',
|
||||
) );
|
||||
?>
|
||||
|
||||
</div><!-- .entry-content -->
|
||||
|
||||
<footer class="entry-footer">
|
||||
|
||||
<?php edit_post_link( __( 'Edit', 'understrap' ), '<span class="edit-link">', '</span>' ); ?>
|
||||
|
||||
</footer><!-- .entry-footer -->
|
||||
|
||||
</article><!-- #post-## -->
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<?php
|
||||
/**
|
||||
* Template Name: Vertical One Page
|
||||
*
|
||||
* Template for displaying a page without sidebar even if a sidebar widget is published
|
||||
*
|
||||
* @package understrap
|
||||
*/
|
||||
|
||||
get_header(); ?>
|
||||
|
||||
<?php
|
||||
/*
|
||||
* Exclude the posts page from being shown in this layout.
|
||||
* Order pages by their order number.
|
||||
*/
|
||||
$exclude = get_option( 'page_for_posts' );
|
||||
$args = array(
|
||||
'post_type' => 'page',
|
||||
'post__not_in' => array( $exclude ),
|
||||
'orderby' => 'menu_order',
|
||||
'order' => 'ASC'
|
||||
);
|
||||
|
||||
$qry = new WP_Query( $args );
|
||||
|
||||
?>
|
||||
|
||||
<div class="wrapper" id="full-width-page-wrapper">
|
||||
|
||||
<div id="content" class="container">
|
||||
|
||||
<div id="primary" class="col-md-12 content-area">
|
||||
|
||||
<main id="main" class="site-main" role="main">
|
||||
|
||||
<?php if ( have_posts() ): while ( $qry->have_posts() ): $qry->the_post() ?>
|
||||
<div class="page">
|
||||
<?php get_template_part( 'loop-templates/content', 'verticalpage' ); ?>
|
||||
</div>
|
||||
|
||||
<?php wp_reset_postdata(); //reset custom query?>
|
||||
<?php endwhile; endif; ?>
|
||||
|
||||
</main><!-- #main -->
|
||||
|
||||
</div><!-- #primary -->
|
||||
|
||||
</div><!-- Container end -->
|
||||
|
||||
</div><!-- Wrapper end -->
|
||||
|
||||
<?php get_footer(); ?>
|
||||
Reference in New Issue