我刚刚创建了一个基本的 html 页面布局,我目前正试图让它在 wordpress 上工作,创建了 header.php、index.php、footer.php,用 php 调用它们,我遵循了这个指南:https://thethemefoundry.com/blog/html-wordpress/
所有这些都在那里,在我上传主题并激活它之后,我得到了这个:
没有div,没有图片,只有文字
我将在原始 html/css 和 php 文件下面包含我的代码:
/*
Theme Name: SSK theme
Theme URI:
Description: Tema para o site da ssk
Version: 1.0
Author: DA
Author URI: www
*/
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
font-family: Helvetica, Arial, Sans-Serif;
line-height: 24px;
background: #eee url(images/body-bg.jpg) center top no-repeat;
width:100%;
height: 100%;
}
#container {
width: 80%;
margin: 0 auto;
height:1100px;
margin-top: -75px;
}
#container p {
margin-bottom: -50px;
color: #0066FF;
font-size: 25px;
}
#languages {
background-color: red;
height:22px;
width: 200px;
position: absolute;
top:60px; right: 125px;
}
#destaques {
margin-top: 75px;
width:100%;
background-color: grey;
}
#main_page_holder {
border-top: 2px solid blue;
position: relative;
margin-top: 110px;
width: 100%;
height: 30%;
}
#home_navigation_link {
margin-left: 1.7%;
margin-right: 1%;
margin-top: 2%;
width: 30%;
height: 35%;
display: inline-block;
background-color: #f2f2f2;
}
#Projetos {
margin-top: 110px;
width: 100%;
height: 20%;
background-color: orange;
}
#projsquare {
border-top: 2px solid blue;
margin-top: -0px;
height: 30%;
}
.squa {
width: 125px;
float:left;
height:125px;
background:magenta;
margin:10px;
margin-top: 90px;
}
#logo2 {
float: right;
width: 30%;
height: 100%;
background-color: red;
}
#logo2 img {
background-repeat: no-repeat;
width: 100%;
height: 30%;
}
.ima {
background-image: url("img/logo.png");
background-repeat: no-repeat;
width:35%;
height:100%;
background-color: blue;
float: left;
-moz-border-radius: 60%;
-webkit-border-radius: 60%;
border-radius: 60%;
border-color:white;
}
.ima img {
width:100%;
height:100%;
-moz-border-radius: 60%;
-webkit-border-radius: 60%;
border-radius: 60%;
border-color:white;
}
.tit {
color: #0066FF;;
float:left;
width:65%;
height:15%;
}
.tito {
width:65%;
height:15%;
background-color: black;
}
#categories {
list-style: none;
position: absolute;
top: 125px;
right: 125px;
font-size: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b75b1+0,529282+47,71ac4a+100 */
background: rgb(27, 117, 177);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiNzViMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzUyOTI4MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MWFjNGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgb(27, 117, 177)), color-stop(47%, rgb(82, 146, 130)), color-stop(100%, rgb(113, 172, 74)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* IE10+ */
background: linear-gradient(to right, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b75b1', endColorstr='#71ac4a', GradientType=1);
/* IE6-8 */
}
#categories li {
display: inline-block;
vertical-align: top;
position: relative;
}
#categories li a {
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 22px;
display: block;
}
#categories li:before{
content: '';
width: 1px;
height: 15px;
background: #fff;
position: absolute; top: 0; left: 0;
}
#categories li:first-child:before{
background: none;
}
#header {
overflow: hidden;
padding: 0 0 50px 0;
}
#mllcont {
height:40vh;
background-image: url("img/header.png");
background-repeat: no-repeat;
}
#slidecont {
background-image: url("img/back.jpg");
height:100vh;
background-color: red;
background-size: cover;
background-repeat: no-repeat;
}
#slidecont img {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
#squares {
width:100%;
height:250px;
position: relative;
}
#divs p {
position: absolute;
bottom: -100px;
color: #0066FF;
font-size: 25px;
}
#divs div {
height: 300px;
width: 20%;
border: 0px solid red;
margin-left: 2.5%;
margin-right: 2.5%;
float: left; /*Here you can also use display: inline-block instead of float:left*/
background: white;
opacity: 0.7;
}
.circle{
border:1px solid red;
height:20px;
width:20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
position: relative;
}
#header h1 {
float: left;
}
#content, #footer, #header {
height: 100%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Particle</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!--1 parte-->
<div id="slidecont">
<img src="img/banner.png"/>
<div id="mllcont">
<div id="logo">
</div>
<div id="languages">
</div>
<ul id="categories">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>
</div>
<!--1 parte-->
<!--2 parte-->
<div id="container">
<div id="squares">
<div id="divs">
<div> <div class="tito"> </div> </div>
<div> <div class="tito"> </div> </div>
<div> <div class="tito"> </div> </div>
<div> <div class="tito"> </div> </div>
<p> Destaques </p>
</div>
</div>
<div id="main_page_holder">
<div id ="destaquetex">
</div>
<div id="home_navigation_link">
<div class="ima"> </div>
<div class="tit"> Nova liderança SKK </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/2.jpg"> </div>
<div class="tit"> Descontaminação </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/3.jpg"> </div>
<div class="tit"> ISOAIR </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/4.jpg"> </div>
<div class="tit"> SmartPower </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/4.jpg"> </div>
<div class="tit"> Móveis de congelação </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/6.jpg"> </div>
<div class="tit"> Universal R </div>
</div>
</div>
<p> Projetos</p>
<div id="projsquare">
<div class="squa"> </div>
<div class="squa"> </div>
<div class="squa"> </div>
<div class="squa"> </div>
<div id="logo2"> <img src="img/logo.png"> </div>
</div>
</div>
<!--2 parte-->
<!--3 parte-->
<div id="footer">
</div>
<!--3 parte-->
</body>
</html>
主题文件:
INDEX.PHP
<?php get_header(); ?>
<div id="container">
<div id="squares">
<div id="divs">
<div> <div class="tito"> </div> </div>
<div> <div class="tito"> </div> </div>
<div> <div class="tito"> </div> </div>
<div> <div class="tito"> </div> </div>
<p> Destaques </p>
</div>
</div>
<div id="main_page_holder">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
<div id ="destaquetex">
</div>
<div id="home_navigation_link">
<div class="ima"> </div>
<div class="tit"> Nova liderança SKK </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/2.jpg"> </div>
<div class="tit"> Descontaminação </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/3.jpg"> </div>
<div class="tit"> ISOAIR </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/4.jpg"> </div>
<div class="tit"> SmartPower </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/4.jpg"> </div>
<div class="tit"> Móveis de congelação </div>
</div>
<div id="home_navigation_link">
<div class="ima"> <img src="img/6.jpg"> </div>
<div class="tit"> Universal R </div>
</div>
</div>
<p> Projetos</p>
<div id="projsquare">
<div class="squa"> </div>
<div class="squa"> </div>
<div class="squa"> </div>
<div class="squa"> </div>
<div id="logo2"> <img src="img/logo.png"> </div>
</div>
</div>
<?php get_footer(); ?>
Header.php
<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' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<div id="slidecont">
<img src="img/banner.png"/>
<div id="mllcont">
<div id="logo">
</div>
<div id="languages">
</div>
<ul id="categories">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>
</div>
footer.php
<div id="footer">
</div>
最佳答案
每当您使用链接时,例如
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Wordpress 需要知道您的 css 文件的路径。你的正常构建是这样的:
index.php
/wp-content/
/wp-content/themes/
/wp-content/themes/theme_name/
/wp-content/themes/theme_name/index.php
/wp-content/themes/theme_name/style.css
/wp-content/themes/theme_name/images/
/wp-content/themes/theme_name/images/image.jpg
因此文件路径
需要相对于您的主题文件夹
。您可以使用 php 代码段来获取主题的 url:
<?php bloginfo('template_url'); ?>
如果您想包含它,您可以更改您的网址。例如
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<img src="images/image.jpg">
变成:
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
<img src="<?php bloginfo('template_url'); ?>/images/image.jpg">
在 index.php
、header.php
中使用 src
或 href
对所有文件路径执行此操作、footer.php
和其他 php 文件
。
关于php - 将一个简单的 html/css 页面转换为 wordpress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31243845/