[对于那些想要创建主题的人来说必看! ] WordPress的页面说明

现在,有两个创建博客的选项:使用现有的博客服务(例如livedoor)或使用Wordpress。

使用WordPress创建博客的好处是您可以自由选择主题,并且可以使用插件来实现诸如查询表单之类的功能。

使用Wordpres创建博客非常受欢迎,因为即使是业余爱好者也可以轻松地掌握它。

尽管它就是这样的Wordpress,但我认为大多数人还是以生存为主题。但是,如果原样使用主题,则无法调整布局。

在这种情况下,如果您了解Wordpress主题的结构,则可以轻松修改布局。许多人认为编辑Wordpress主题时门槛很高,但实际上,任何了解“ html / css”内容的人都可以轻松编辑Wordpress。

在本文中,我将解释一个简单博客首页的代码。希望您能学习如何创建Wordpress主题。

WordPress的如何生成网页

WordPress的可以创建一个文件以进行部分读取。

因此,通过预先调用网站各部分的文件,将显示一个网页。

作为基本配置文件

  • index.php
  • 头er.php
  • sidebar.php
  • footer.php
  • function.php

它由上述5个文件组成。

这些文件可以合并以创建单个网页。

这些都是

  • index.php:文件显示在首页上
  • 头er.php:包含诸如元标记,标题和标题的信息。
  • :包含侧边栏信息
  • footer.php:包含页脚信息
  • function.php:设置插件,仪表板等。

说明了以上信息。

查看要调用的代码

让我们调用每个文件看看。您可以使用以下代码调用每个文件。

  • <?php get_header(); ?>:header.phpを呼び出す
  • <?php get_footer(); ?>:footer.phpを呼び出す
  • <php get_sidebar();>:sidebar.phpを呼び出す

另外,您自己命名的文件

  • <?php get_template_part(‘ファイル名.php’); ?>:ファイル名.phpを呼び出す

可以通过使用来调用。

文件结构如下。

主题文件
├──index.php
├── 头er.php
├──footer.php
├──
├──function.php
└──style.css

所有文件都在同一目录中。

我会检查我是否真的可以叫它

现在,让我们检查简单的代码以查看代码是否正确。

index.php

<?php get_header(); ?>

<div id="main">
<p>メインコンテンツ</p>
</div>

<php get_sidebar();>

<?php get_footer(); ?>

头er.php,<head>などの情報も記述されます。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="uft-8">
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" >

   <title>    <?php bloginfo('name'); ?>   </title>

</head>
<body>
   <div id="header">

<p>ヘッダー</p>

</div>

sidebar.php

<div id="sidebar">

<p>サイドバー</p>

</div>

footer.php

<div id="footer">

<p>フッター</p>

</div>
</body>
</html>

style.css

#header,#sidebar,#main,#footer{
  border:solid 1px #000;
  margin:10px;
}

当您实际运行它时,它将看起来像下面的图像。

屏幕截图2016-03-22 pm 5.10.04

如果您看一下,您会发现在index.php中实际上已经调用了页眉和页脚。

尝试制作首页(index.php)

您知道如何调用每个文件吗?

现在,基于先前的内容,我想解释更多类似Wordpress的页面。

我将在下面解释图片的页面。

屏幕截图2016-03-22下午5.28.49

此页面上的代码完全不同。

因此,我想逐一检查每个文件,例如index.php和header.php。

index.php

首先从index.php的内容

<?php get_header(); ?>
<div id="main">


<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

<div >
	<h2><a href="<php the_permalink();?>"><?php the_title(); ?></a></h2>
	<php the_content();?>
</div>

<?php  endwhile;  endif;  ?>

</div>
<php get_sidebar();>

<?php get_footer(); ?>

好吧,当我看着它时,诸如“有很多难以理解的代码…我敢肯定,你们中的某些人可能会想,但我会解释每一个。

让我们从代码中心的那一个开始。

  • <php the_permalink();?>:個別記事へのリンク
  • <?php the_title(); ?>:個別記事のタイトル
  • <php the_content();?>:個別記事の本文

看起来像这样。

接着

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

//さっき説明したもの省略

<?php endwhile; endif;  ?>

我将跳过前面解释的内容,并解释其余的代码。
这些代码的内容位于中间,

“显示与Wordpress中一样多的文章”

是内容。中间的一个是文章的标题和正文,因此整个代码表示

显示WordPress中的所有文章标题和正文

关于它。

这是index.php中主要内容部分的说明。

接下来,让我们创建一个标题。

头er.php

首先让我们看一下整个代码。

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="uft-8">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />

<title>
<?php bloginfo('name'); ?>
</title>


</head>
<body>
<div id="page">

<div id="header">


<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>

<img src="<?php bloginfo('template_url'); ?>/top.png" width=1024px>

</div>

顺便说一下,有很多东西是普通html中看不到的。

它总结了不熟悉的代码及其含义。

  • <?php bloginfo(‘name’); ?>:ブログのトップページのurl
  • <?php bloginfo(‘description’); ?>:ブログのサブタイトル
  • <?php bloginfo(‘template_url’); ?>:テーマのアドレス

看起来像这样。

一个警告是引用图像和主题时<?php bloginfo(‘template_url’); ?>请注意,您需要在中指定主题地址,然后在图像所在的目录中指定。

footer.php

<div id="footer">

<p>Copyright © Uetani Ryota All Rights Reserved.</p>

</div>
</div>
</body>
</html>

关于这次的页脚,与普通的html相同。没有任何独特的WordPress。

关于侧边栏

现在对于侧边栏,让我们尝试反映仪表板小部件的设置。

首先,您需要在function.php中编写以下内容以显示仪表板小部件。

<?php

if ( function_exists('register_sidebar') )

  register_sidebar();

?>

现在,您应该在仪表板上看到该小部件。

接下来,显示小部件的内容。

<div id="sidebar">
  	<ul>
  		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
  	<li>

  		<h3>Categories</h3>
  			<ul>
  		<?php wp_list_categories('title_li='); ?>
  			</ul>
  	</li>
  		<?php endif; ?>
  	</ul>

</div>
<div id="clearfix"></div>

小部件设置现在反映在sidebar.php中。

关于style.css

我将发布最后解释的页面的CSS源。

@charset "utf-8";
/*
Theme Name: Original
*/
#page{
  width:680px;
  margin:0 auto;

}
#header{
  margin-bottom:10px;
  background:#fff;
}

#main{
  width:500px;
  float:left;
}
#main div{
  width:500px;
  height:100px;
  background:#fff;
  margin-bottom:5px;
}
#main div h2{
  margin-bottom:10px;
}
#main div p{
  margin-bottom:10px;
}
#sidebar{
  width:170px;
  float:right;
  background:#fff;
}
#footer{
  margin-top:0px;
  text-align: center;
  background:#fff;
}

ul,li{
  list-style-type:none;
}
li h2{
  text-align: center;
  border-bottom:solid 1px #eee;
  margin:5px 0;
}
li{
  margin:2px 0;
}
#clearfix{
  content:".";
  display:block;
  clear:both;
}

body {
  font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," MS Pゴシック","MSPGothic",sans-serif;
  font-size:15px;
  background:#f2f2f2;
  color:#1f1f1f;
}
a{
  text-decoration: none;
  color:#0000ff;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
form,input,p,blockquote,th,td {
  margin:0;
  padding:0;
}
img {
  border:0;
  vertical-align: top;
}

如果您看一下它,可以发现它基本上是一个普通的CSS。

但是,编写Wordpress style.css时有一个警告。

style.css的开头有以下注释。

/*
Theme Name: Original
*/

在这里,描述Wordpress主题的名称。

如果您在此处未描述,则Wordpress主题的名称将不会反映在产品中,否则插件中将出现问题,因此请务必对其进行描述。

最后

你怎么看?

我解释了WordPress首页的结构。 Wordpress特有一个描述,但除此之外,您可以理解它是html和css的内容。

通过一点一点地学习它,您将能够更好地了解Wordpres。
希望对希望使用Wordpress创建主题的人有所帮助。

撰写本文的人

我是一名自由网页工程师。博客://uetani33.net/