php - 将一个简单的 html/css 页面转换为 wordpress

标签 php html css wordpress

我刚刚创建了一个基本的 html 页面布局，我目前正试图让它在 wordpress 上工作，创建了 header.php、index.php、footer.php，用 php 调用它们，我遵循了这个指南:https://thethemefoundry.com/blog/html-wordpress/

所有这些都在那里，在我上传主题并激活它之后，我得到了这个:

Wordpress site after applied the theme

没有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"> &nbsp; Nova liderança SKK </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/2.jpg"> </div>
						<div class="tit"> &nbsp; Descontaminação </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/3.jpg"> </div>
						<div class="tit"> &nbsp; ISOAIR </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/4.jpg"> </div>
						<div class="tit"> &nbsp; SmartPower </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/4.jpg"> </div>
						<div class="tit"> &nbsp; Móveis de congelação </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/6.jpg"> </div>
						<div class="tit"> &nbsp; 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"> &nbsp; Nova liderança SKK </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/2.jpg"> </div>
                        <div class="tit"> &nbsp; Descontaminação </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/3.jpg"> </div>
                        <div class="tit"> &nbsp; ISOAIR </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/4.jpg"> </div>
                        <div class="tit"> &nbsp; SmartPower </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/4.jpg"> </div>
                        <div class="tit"> &nbsp; Móveis de congelação </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/6.jpg"> </div>
                        <div class="tit"> &nbsp; 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/

上一篇：c# - HtmlRenderer 不从 css 渲染背景图像

下一篇：javascript - Jquery 数据绑定(bind)到无序列表

相关文章：

html - 为什么 dir ="rtl"会改变顺序，但只是有时？

javascript - 如何根据浏览器的大小用JavaScript添加css样式

php - 如何在不指定数据库名称的情况下连接到 PostgreSQL？

php - 帮助 PHP array_filter 函数

html - 如何根据图像大小调整div的大小

html - Bootstrap 带间距的固定导航栏

php - 将 jQuery 数组字符串转换为 PHP 数组

php - 如何使用PHP获取假期日期

php - php内置网络服务器上没有文件上传

css - 如何在 Angular 11.2.0 或更低版本中设置 TailwindCSS

©2024 IT工具网  联系我们