我正在尝试开发一个新的wordpress主题来学习主题开发。所以我跟着wordpress博客终于得到了我的主题版本。当我在本地测试我的主题它的工作正常,但当在wordpress上传相同时,身体已经消失,除了页脚之外不会显示任何内容。我正在为身体使用jquery和javascript。
部首:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<?php wp_head(); ?>
</head>
<body>
的index.php:
<?php
/**
* The main template file.
*/
get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
$html = '<div id="pscanvas" class="row">
<div class="row__inner ">';
// The Query
query_posts( array ('orderby' => 'date' ) );
// The Loop
while ( have_posts() ) : the_post();
if ( has_post_thumbnail() ) {
$imgurl=wp_get_attachment_url( get_post_thumbnail_id() );
$posturl= get_permalink();
$title=get_the_title();
$html .='<a href="'. $posturl .'" class="tile">';
$html .= '<div class="tile__media">';
$html .='<img class="tile__img" src="'. $imgurl.'"/>';
$html .='</div><div class="tile__details"><div class="tile__title">';
$html .= ''. $title .'</div></div></a>';
}
endwhile;
// Reset Query
wp_reset_query();
$html .= '</div></div>';
<?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer(); ?>
footer.php
<footer class="footer">
<p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>
的style.css
/*
Theme Name: Custom theme
Description: My Basic theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
body {
font-family: arial, helvetica, verdana;
font-size: 0.8em;
width: 100%;
height: 100%;
}
.header {
background-color: #1be;
margin-left: 14%;
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 72%;
height: 250px;
}
.content {
background-color: #999;
margin-left: 14%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
}
.sidebar {
background-color: #1d5;
margin-right: 14%;
margin-top: 5px;
float: right;
border-width: 0.1em;
border-color: #999;
border-style: solid;
top: 180px;
width: 23%;
}
.footer {
background-color: red;
margin-left: 14%;
float: left;
margin-top: 5px;
width: 72%;
height: 50px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
}
h1,
p {
text-align: center;
}
p {
width: 100%;
max-width: 500px;
margin: auto;
}
.row {
overflow: hidden;
width: 100%;
}
.row__inner {
transition: 450ms transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 140.625px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
transition: 450ms all;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 140.625px;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
transition: 450ms opacity;
}
/*
before hover content is null
*/
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
/*
play button overlay on hover
*/
.tile__details:before {
content: '\25B6';
left: 0;
width: 100%;
font-size: 30px;
color:#ffffee;
margin-left: 5px;
margin-top: -25px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
color:#ffffee;
padding: 10px;
}
.row__inner:hover {
transform: translate3d(-125px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
transform: scale(2);
opacity: 1;
}
.tile:hover ~ .tile {
transform: translate3d(250px, 0, 0);
}
我相信php没有得到解析或其他东西。但由于我是初学者,我无法调试。首页应显示所有精选帖子,并在本地工作正常。请帮忙。