implementing Foundation Grid systeem in Wordpress thema via header,function.php
ik probeer Foundation Grid Systeem implementeren in Wordpress thema.
ik heb volgens instructies in internet Foundation Grid Systeem gedownload en het benodigde bestanden geüpload naar mij thema Directory via Filezilla.
in function.php ik heb deze lijnen toegevoegd:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Add Foundation JS */
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/foundation.min.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/jquery.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/what-input.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'garage-skip-link-focus-fix', get_template_directory_uri() . '/garage/js/skip-link-focus-fix.js', array(), '20151215', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'garage_scripts' );
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/foundation.min.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/jquery.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-foundation-js', get_template_directory_uri() . '/foundation/js/vendor/what-input.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'garage-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'garage-skip-link-focus-fix', get_template_directory_uri() . '/garage/js/skip-link-focus-fix.js', array(), '20151215', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'garage_scripts' );
in header.php ik heb deze script toegevoegd:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://use.fontawesome.com/d20685ed0e.js"></script> <!-- TODO: Place your Font Awesome embed code -->
<script>
jQuery(document).ready(function($) {
$(document).foundation();
});
</script>
</head>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://use.fontawesome.com/d20685ed0e.js"></script> <!-- TODO: Place your Font Awesome embed code -->
<script>
jQuery(document).ready(function($) {
$(document).foundation();
});
</script>
</head>
ik heb ook extra lijnen toegevoegd in header,index,footer.php bijvoorbeeld:
Code (php)
1
2
3
4
2
3
4
class="site-branding">
<div class="row"><!-- Foundation .row start -->
<div class="small-12 columns"><!-- Foundation .
<div class="row"><!-- Foundation .row start -->
<div class="small-12 columns"><!-- Foundation .
ik heb van alles geprobeerd maar ik kan niet vinden het probleem . de thema blijft niet erkennen de foundation Grid systeem . wat kan het fout zijn de directories in function.php zijn correct.
dank u wel
Johan
Toevoeging op 06/09/2016 15:34:00:
dank u wel iedereen,
ik heb net makkelijker weg gevonden op het site van:
http://foundation.zurb.com/sites/docs/installation.html
Code (php)
1
2
3
4
5
2
3
4
5
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
ik heb het geplakt in het head sectie van header.php
en het is gelukt eindelijk.
nu ik kan gebruik maken van foundation grid systeem in Wordpress.
johannes
Er zijn nog geen reacties op dit bericht.