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
33
README.md
33
README.md
|
|
@ -3,7 +3,7 @@ Start talking: [![Gitter](https://img.shields.io/gitter/room/holger1411/understr
|
|||
## About
|
||||
|
||||
I’m a huge fan of Underscores, Bootstrap, and Sass. Why not combine these into a solid WordPress Theme Framework?
|
||||
That’s what UnderStrap is.
|
||||
That’s what UnderStrap is.
|
||||
You can use it as starter theme and build your own theme on top of it. Or you use it as parent theme and create your own child theme for UnderStrap.
|
||||
|
||||
At the moment, UnderStrap is in a very early stage. But if you want, feel free to use it for your own WordPress theme!
|
||||
|
|
@ -54,7 +54,7 @@ http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
|
|||
- ** 0.4.5 Jun. 20th 2016 **
|
||||
- Adding right sanitizing function for customizer
|
||||
- Fixing some escaping problems
|
||||
- Removing "add script" customizer function
|
||||
- Removing "add script" customizer function
|
||||
- Calling all sidebars with "get_sidebar"
|
||||
- Load hero area on index.php conditionally
|
||||
- Remove unused code, files and dependencies
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -6,34 +6,49 @@
|
|||
*/
|
||||
|
||||
function understrap_scripts() {
|
||||
wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), '0.4.7');
|
||||
wp_enqueue_script('jquery');
|
||||
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), '0.4.7', true );
|
||||
wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), '0.4.7' );
|
||||
wp_enqueue_script( 'jquery' );
|
||||
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), '0.4.7', true );
|
||||
|
||||
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
||||
wp_enqueue_script( 'comment-reply' );
|
||||
}
|
||||
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' );
|
||||
|
||||
/**
|
||||
*Loading slider script conditionally
|
||||
**/
|
||||
/**
|
||||
*Loading slider script conditionally
|
||||
**/
|
||||
|
||||
if ( is_active_sidebar( 'hero' ) ):
|
||||
add_action("wp_enqueue_scripts","understrap_slider");
|
||||
|
||||
function understrap_slider(){
|
||||
if ( is_front_page() ) {
|
||||
$data = array(
|
||||
"timeout"=> intval( get_theme_mod( 'understrap_theme_slider_time_setting', 5000 )),
|
||||
"items"=> intval( get_theme_mod( 'understrap_theme_slider_count_setting', 1 ))
|
||||
);
|
||||
add_action( "wp_enqueue_scripts", "understrap_slider" );
|
||||
|
||||
wp_enqueue_script("understrap-slider-script", get_stylesheet_directory_uri() . '/js/slider_settings.js', array(), '0.4.7');
|
||||
wp_localize_script( "understrap-slider-script", "understrap_slider_variables", $data );
|
||||
}
|
||||
}
|
||||
function understrap_slider() {
|
||||
if ( is_front_page() ) {
|
||||
$data = array(
|
||||
"timeout" => intval( get_theme_mod( 'understrap_theme_slider_time_setting', 5000 ) ),
|
||||
"items" => intval( get_theme_mod( 'understrap_theme_slider_count_setting', 1 ) )
|
||||
);
|
||||
|
||||
wp_enqueue_script( "understrap-slider-script", get_stylesheet_directory_uri() . '/js/slider_settings.js', array(), '0.4.7' );
|
||||
wp_localize_script( "understrap-slider-script", "understrap_slider_variables", $data );
|
||||
}
|
||||
}
|
||||
endif;
|
||||
|
||||
|
|
|
|||
|
|
@ -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