我将我的主题上传到WordPress后,我的左拉和右拉类似乎无法正常工作。这是网站:
https://www.brightideas.mattriale.com/
左上角的电话号码和电子邮件地址应该更左侧,关于我们,登录/注册和帮助应该更加正确。此外,应进一步留下灯泡标识,并且HOME,SERVICES,PRODUCTS和CONTACT链接应该更加正确。此外,在此处输入您的电子邮件...使用灰色的“订阅”按钮应位于页面的右侧。并且,主页,关于我们,服务,产品和联系我们页脚链接应位于页面的右侧。
有关如何解决此问题的任何建议?当我按F12时,控制台显示我的CSS和JS文件正确加载,但正如您在functions.php文件的开头所看到的,我已经添加了style.css文件的入队代码。
/* Theme Name: RialedUp
Theme URI: http://underscores.me/
Author: Matt Riale
Author URI: http://mattriale.com/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mattriale
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
MattRiale is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
## Links
## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
## Posts and pages
## Comments
# Infinite scroll
# Media
## Captions
## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
*{margin: 0; paddin: 0; border: 0; outline: none;}
body{font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px; color: #222;}
.container{width: 1720px; margin: 0 auto}
h1,h2{font-family: 'Roboto Condensed', sans-serif; font-size: 36px; text-transform: uppercase; font-weight: bold; margin-bottom: 45px;}
h2{font-size: 24px; margin-bottom: 26px;}
.pull-left{float: left;}
.pull-right{float: right;}
.clearfix{clear: both;}
.text-center{text-align: center;}
.btn-orange{padding: 10px 34px; background-color: #ff750d; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; display: inline-block; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.btn-green{padding: 10px 34px; background-color: #00a82f; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; display: inline-block; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.btn-blue{padding: 10px 34px; background-color: #0030ff; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; display: inline-block; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.column{float: left;}
.column.mr0{margin-right: 0 !important;}
.form-group{margin-bottom: 15px}
/*generis css section ends*/
header ul{list-style: none;}
header li, headert a{display: inline-block;}
header li{padding: 12px 22px}
header a{color: #222; text-decoration: none;}
.top-info li{border-right: 1px solid #ccc}
.top-links li{border-left: 1px solid #ccc}
.top-header{border-bottom: 1px solid #ccc}
.main-header{padding: 12px 0}
.main-header li{padding: 24px 0}
.main-header a{padding: 24px 34px; font-size: 15px; font-weight: bold; text-transform: uppercase;}
.search{background: none; line-height: 45px; font-size: 15px; cursor: pointer; padding: 6px 20px}
.slider{max-height: 600px; overflow: hidden;}
.slider img{width: 100%; height: auto;}
section{padding: 80px 0 50px}
bg-light-gray{background-color: #f5f5f5}
.intro .column{width: 553px; margin-right: 30px}
.intro h1{margin-bottom: 25px}
.intro img{margin-bottom: 25px}
.intro-text{max-width: 890px; margin: 0 auto; margin-bottom: 50px}
.column-text{margin-bottom: 20px}
.services .block{width: 570px; color: #fff}
.block .column{width: 50%}
.services .row{margin-left: 5px}
.services .row2{margin-left: 5px}
.services .row .text-column{background-color: #270bb5; padding: 23px 15px; box-sizing: border-box; height: 213px}
.services .row .text-column2{background-color: #ff750d; padding: 23px 15px; box-sizing: border-box; height: 213px}
.services .row .text-column3{background-color: #5C12B5; padding: 23px 15px; box-sizing: border-box; height: 213px}
.services .row2 .text-column{background-color: #0b5b09; padding: 23px 15px; box-sizing: border-box; height: 213px}
.services .row2 .text-column2{background-color: #75390c; padding: 23px 15px; box-sizing: border-box; height: 213px}
.services .row2 .text-column3{background-color: #5B0001; padding: 23px 15px; box-sizing: border-box; height: 213px}
.img-column img{display: block;}
.subscribe{background-color: #222; color: #fff; padding: 50px 0}
.subscribe h2{font-size: 24px; margin-bottom: 15px}
.subscribe form{display: flex;}
.subscribe input, .btn-subscribe{padding: 18px; 24px; font-family: 'Open Sans', sans-serif; font-size: 14px}
.subscribe input{width: 354px; box-sizing: border-box; border-top-left-radius: 25px; border-bottom-left-radius: 25px}
.btn-subscribe{background-color: #8e8e8e; color: #fff; font-weight: bold; border-top-right-radius: 25px; border-bottom-right-radius: 25px}
.contact .outer-row .column{width: 554px; margin-right: 30px}
.outer-row .row .column{width: 262px; margin-right: 15px}
.contact input,.contact textarea{width: 100%; padding: 12px 13px; box-sizing: border-box; background-color: #e5e5e5; font-family: 'Open Sans', sans-serif; font-size: 14px}
.google-map iframe{max-height: 232px; overflow: hidden; max-width: 100%}
.social-icons{margin-top: 14px}
.social-icons a{height: 40px; width: 40px; background-color: #4e4e4e; color: #fff; font-size: 20px; display: inline-block; margin-right: 16px; padding: 8px 0; text-align: center; box-sizing: border-box;}
footer{background-color: #222; padding: 30px 0; color: #999;}
footer a {color: #999; text-decoration: none; margin-left: 22px}
<?php wp_footer(); ?>
<div class="pull-left top-info">
<ul>
<li><i class="fa fa-phone"></i> (555) 255-1055</li>
<li><i class="fa fa-envelope"></i> brightideas@gmail.com</li>
</ul>
</div>
<div class="pull-right top-links">
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Login/Sign Up</a></li>
<li><a href="">Help</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="main-header">
<div class="container">
<div class="pull-left logo">
<img src="/wp-content/themes/Bright Ideas/images/logo.png" width="191" height="66" alt="logo" />
</div>
<div class="pull-right">
<nav class="pull-left">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Products</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<div class="search pull-right">
<button class="search" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</header>
<!-- end header -->
<div class="slider">
<img src="/wp-content/themes/Bright Ideas/images/hero-header.jpg" width="1920" height="600" alt="slider" />
</div>
<!-- .slider -->
<section class="intro text-center">
<div class="container">
<h1>What We Do</h1>
<div class="intro-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,nisi elit consequat. This is Photoshop’s version of Lorem Ipsum.
</div>
<div class="row">
<div class="column">
<img src="/wp-content/themes/Bright Ideas/images/design.jpg" width="131" height="131" alt="design" />
<h2>Design</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat. This is Photoshop’s version of Lorem Ipsum.
</div>
<a href="#" class="btn-orange">Learn More</a>
</div>
<div class="column">
<img src="/wp-content/themes/Bright Ideas/images/build.jpg" width="131" height="131" alt="design" />
<h2>Build</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat. This is Photoshop’s version of Lorem Ipsum.
</div>
<a href="#" class="btn-orange">Learn More</a>
</div>
<div class="column mr0">
<img src="/wp-content/themes/Bright Ideas/images/assemble.jpg" width="131" height="131" alt="design" />
<h2>Assemble</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat. This is Photoshop’s version of Lorem Ipsum.
</div>
<a href="#" class="btn-orange">Learn More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
<!-- end .intro -->
<section class="services bg-light-gray text-center">
<div class="container">
<h1>Our Products</h1>
<div class="row">
<div class="block column">
<div class="column text-column">
<h2>Water</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</div>
<a href="#" class="btn-green">Learn More</a>
</div>
<div class="column img-column">
<img src="/wp-content/themes/Bright Ideas/images/wind.jpg" width="285" height="213" alt="water" />
</div>
<div class="clearfix"></div>
</div>
<div class="block column">
<div class="column text-column2">
<h2>Sun</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</div>
<a href="#" class="btn-green">Learn More</a>
</div>
<div class="column img-column">
<img src="/wp-content/themes/Bright Ideas/images/earth.jpg" width="285" height="213" alt="water" />
</div>
<div class="clearfix"></div>
</div>
<div class="block column">
<div class="column text-column3">
<h2>Car</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</div>
<a href="#" class="btn-green">Learn More</a>
</div>
<div class="column img-column">
<img src="/wp-content/themes/Bright Ideas/images/home.jpg" width="285" height="213" alt="water" />
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="row2">
<div class="block column">
<div class="column img-column">
<img src="/wp-content/themes/Bright Ideas/images/water.jpg" width="285" height="213" alt="water" />
</div>
<div class="column text-column">
<h2>Wind</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</div>
<a href="#" class="btn-green">Learn More</a>
</div>
<div class="clearfix"></div>
</div>
<div class="block column">
<div class="column img-column">
<img src="/wp-content/themes/Bright Ideas/images/sun.jpg" width="285" height="213" alt="water" />
</div>
<div class="column text-column2">
<h2>Earth</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</div>
<a href="#" class="btn-green">Learn More</a>
</div>
<div class="clearfix"></div>
</div>
<div class="block column">
<div class="column img-column">
<img src="/wp-content/themes/Bright Ideas/images/car.jpg" width="285" height="213" alt="water" />
</div>
<div class="column text-column3">
<h2>Home</h2>
<div class="column-text">
This is Photoshop’s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</div>
<a href="#" class="btn-green">Learn More</a>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
<!-- end .services -->
<section class="subscribe">
<div class="container">
<div class="column">
<h2>Want to stay in touch with us?</h2>
<p>Just type in your email address to receive our monthly newsletter.</p>
</div>
<div class="column pull-right">
<form name="subscribe">
<input type="email" name="email" placeholder="Enter your email here...">
<button type="submit" class="btn-subscribe">SUBSCRIBE</button>
</form>
</div>
<div class="clearfix"></div>
</div>
</section>
<!-- end .subscribe -->
<section class="contact">
<div class="container">
<h1 class="text-center">Contact Us</h1>
<div class="row outer-row">
<div class="column">
<form name="contact-form">
<div class="row">
<div class="form-group column">
<input type="text" name="name" placeholder="Name*">
</div>
<div class="form-group column mr0">
<input type="email" name="email" placeholder="Email*">
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<textarea name="message" placeholder="Message" rows="8"></textarea>
</div>
<button type="submit" class="btn-blue">Send Feedback</button>
</form>
</div>
<div class="column mr0">
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6612.240765288008!2d-118.3769171965574!3d34.04078296647226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2b972eb8c4a29%3A0xf2dbed2a7f59b47e!2sLos+Angeles+Center+for+Enriched+Studies!5e0!3m2!1sen!2sus!4v1508952878304" width="100%" height="264" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="social-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</section><!-- end .contact -->
<footer>
<div class="container">
<div class="row">
<div class="column">Copyright©2017. All Rights Reserved</div>
<div class="column pull-right">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Contact Us</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</footer><!-- end footer -->
</body>
</html>
<?php
/**
* rialedup functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package rialedup
*/
function add_stylesheet() {
wp_register_style('bootstrap.min',get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );
function theme_styles() {
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap-3.3.7.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');
function theme_js() {
global $wp_scripts;
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
wp_enqueue_script( 'my_custom_js', get_template_directory_uri() . '/js/scripts.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');
if ( ! function_exists( 'rialedup_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which
* runs before the init hook. The init hook is too late for some features, such
* as indicating support for post thumbnails.
*/
function rialedup_setup() {
/*
* Make theme available for translation.
* Translations can be filed in the /languages/ directory.
* If you're building a theme based on rialedup, use a find and replace
* to change 'rialedup' to the name of your theme in all the template files.
*/
load_theme_textdomain( 'rialedup', get_template_directory() . '/languages' );
// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );
/*
* Let WordPress manage the document title.
* By adding theme support, we declare that this theme does not use a
* hard-coded <title> tag in the document head, and expect WordPress to
* provide it for us.
*/
add_theme_support( 'title-tag' );
/*
* Enable support for Post Thumbnails on posts and pages.
*
* @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
*/
add_theme_support( 'post-thumbnails' );
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary', 'rialedup' ),
) );
/*
* Switch default core markup for search form, comment form, and comments
* to output valid HTML5.
*/
add_theme_support( 'html5', array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
) );
// Set up the WordPress core custom background feature.
add_theme_support( 'custom-background', apply_filters( 'rialedup_custom_background_args', array(
'default-color' => 'ffffff',
'default-image' => '',
) ) );
// Add theme support for selective refresh for widgets.
add_theme_support( 'customize-selective-refresh-widgets' );
/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support( 'custom-logo', array(
'height' => 250,
'width' => 250,
'flex-width' => true,
'flex-height' => true,
) );
}
endif;
add_action( 'after_setup_theme', 'rialedup_setup' );
/**
* Set the content width in pixels, based on the theme's design and stylesheet.
*
* Priority 0 to make it available to lower priority callbacks.
*
* @global int $content_width
*/
function rialedup_content_width() {
$GLOBALS['content_width'] = apply_filters( 'rialedup_content_width', 640 );
}
add_action( 'after_setup_theme', 'rialedup_content_width', 0 );
/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function rialedup_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'rialedup' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'rialedup' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'rialedup_widgets_init' );
/**
* Enqueue scripts and styles.
*/
function rialedup_scripts() {
wp_enqueue_style( 'rialedup-style', get_stylesheet_uri() );
wp_enqueue_script( 'rialedup-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'rialedup-skip-link-focus-fix', get_template_directory_uri() . '/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', 'rialedup_scripts' );
/**
* Implement the Custom Header feature.
*/
require get_template_directory() . '/inc/custom-header.php';
/**
* Custom template tags for this theme.
*/
require get_template_directory() . '/inc/template-tags.php';
/**
* Functions which enhance the theme by hooking into WordPress.
*/
require get_template_directory() . '/inc/template-functions.php';
/**
* Customizer additions.
*/
require get_template_directory() . '/inc/customizer.php';
/**
* Load Jetpack compatibility file.
*/
if ( defined( 'JETPACK__VERSION' ) ) {
require get_template_directory() . '/inc/jetpack.php';
}