그리드/신문/잡지 템플릿은 WordPress 스킨 및 테마 커뮤니티에서 점점 더 지배적이 되고 있습니다. 우아해 보이지만 어디서부터 시작해야 할지 모르면 어려울 수 있습니다. 이 튜토리얼에서는 jQuery의 강력한 기능을 사용하여 크기가 줄어든 헤더가 있는 그리드 레이아웃을 만듭니다!
이 튜토리얼에서는 서버에서 WordPress 엔진이 실행되고 있고 파일 업로드, 파일 다운로드 및 탐색 권한이 있다고 가정합니다. WordPress가 설치된 컴퓨터에서 로컬 서버를 실행하려면 여기에서 Windows용 튜토리얼을, 여기에서 OS X용 튜토리얼을 확인하세요.
"wp-content/themes/" 폴더 안에 새 폴더를 만들고 우리가 만들려는 스킨의 이름을 원하는 대로 지정하세요. 이 새 폴더에 2개의 새 파일을 만듭니다. 하나는 "index.php"이고 다른 하나는 "style.css"입니다. 몇 가지 기본적인 WordPress 코드부터 시작하겠습니다. 나는 완전한 WordPress 스킨을 만들 때마다 이 "코드 베이스"로 시작합니다. 왜냐하면 여기에는 필요한 정보가 대부분 포함되어 있기 때문입니다. 풀스킨으로 개발하고 싶으신 분들이 계실 것 같아 여기에 올려드립니다. 또한 내 테마에는 기본 스타일시트를 사용하므로 이 조각을 "style.css"에 복사하고 내용을 별도로 편집합니다. 스타일 시트는 다음 줄과 관련됩니다:
으아악또한 2개의 JavaScript 파일이 필요합니다. 그 중 하나는 jQuery의 복사본이고 다른 하나는 myTheme.js라는 빈 .js 파일입니다. head 요소에서
와 연결하는 것을 잊지 마세요. 으아악나와 다른 패키지를 사용하고 있다면(아마 그럴 가능성이 높음) jQuery rel의 이름을 변경하는 것을 잊지 마세요. "myTheme.js" 는 jQuery 링크 아래 에 위치해야 하며 위에 위치할 수는
없습니다.참고: jQuery 1.2.6은 Wordpress 2.2 이상에도 패키지되어 있으므로 다운로드하고 싶지 않다면 wp-includes/js/jquery/jquery.js에서 찾을 수 있습니다.
이 jQuery 문서를 포함하려면 위의 jQuery rel 대신 이것을 사용하세요. 하지만 여전히 myTheme.js가 필요합니다!새 테마를 선택하고 활성화한 후 원하는 편집기를 사용하여 "index.php"를 열고 코딩을 시작하세요!
각 게시물의 콘텐츠와 메타데이터를 설정하는 데 필요한 모든 XHTML/PHP/Wordpress 코드는 다음과 같습니다. html
열기 태그와 닫기 태그 사이에 붙여넣거나 입력하세요. 아래에서 차근차근 설명하겠습니다!으아악
래핑 div는 기본적으로 나중에 멋지게 배치할 수 있도록 전체 콘텐츠를 래핑합니다. 모든 div는 설명이 매우 필요하며 div 끝에도 주석을 달았으므로 설명에서는 생략하겠습니다. 요컨대, 디자인하기 쉽도록 모든 것을 적절하게 패키지했습니다. .left div는 왼쪽 열, .right div는 오른쪽 열, .entry div는 게시물 항목 등입니다. 루프에서 클래스를 사용하고 있으며 여러 게시물이 있는 것처럼 ID가 백업되고 유효성 검사 오류가 발생합니다.으아악
이것이 무엇인지 이해하지 못한다면 WordPress School로 돌아가세요. 기본적으로 루프 내에서 이루어진 호출과 관련된 데이터베이스 정보를 반복합니다. 제목을 요청하면 루프가 데이터베이스에서 제목을 찾습니다.으아악
이제 구체적인 내용에 대해 이야기해 보겠습니다. 위의 모든 내용에는 게시물에 대해 표시하려는 정보가 포함되어 있습니다. 해당 순서대로 🎜
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('more...'); ?>
</div><<!-- end div.entry -->
它是否比这更不言自明？我们要求提供标题（包装在 h2 元素中，以便我们可以相应地设置其样式）和内容（包装在 .entry div 中，以便所有内容都嵌套在它有自己的 div，也可以轻松设置样式和访问。）。括号中的“more...”表示您在 WordPress 帖子编辑器中使用 标签时的情况。
<?php endwhile; ?> <?php endif; ?>
编码兔子应该明白这个...这又是基本循环！它关闭循环，以便只反复执行循环中包含的“函数”。
唷！您已经掌握了本教程所需的所有 WordPress 代码！做得好！它看起来应该像这样丑陋：
注意：我使用了来自我自己的本地服务器的内容（恰好来自我自己的博客）作为填充内容，因此您的内容不会反映我的内容。
现在我们已经解决了所有的 xhtml 和 php 函数，我们可以继续使用 css 让它看起来更漂亮！快乐！
使用您最喜欢的编辑器再次打开“style.css”，如果尚未打开，请将此代码粘贴到其中。但无论如何你都应该这样做，因为否则你将无法激活主题！
在本教程中，我利用 CSS 的“float”和“clear”的优点来浮动帖子详细信息（或元数据，无论您想如何称呼它），以及并排的内容，并且一篇接着一篇。 。这是基本的布局代码：（注意：这不会让您的页面变得漂亮。）
/*-----LAYOUT-----*/
#wrapper{
width: 600px;
margin: 0 auto;
}
.post{
clear: both;
width: 600px;
}
.post .left{
width: 180px;
float: left;
padding-right: 20px;
}
.post .right{
width: 400px;
float: right;
padding: 0 25px 20px;
}
简单：
我已经完成了数学计算，并确保总宽度总计为 600，因此两列都很好地适合父“.post”div：180px+20px（填充，因此我们有一些间距）+400px= 600 像素
耶！现在，让我们把它变得漂亮起来！
所以我们已经得到了骨架布局，但它看起来仍然有点难看：
这是我们使用级联样式表真正威力的时候。将以下内容复制或输入到之前“布局”代码下方的 style.css 中：
/*-----STYLES-----*/
body{
font: 75%/18px Georgia, "Times New Roman", Times, serif;
background-color: #e4e4e4;
}
a{
color: #006082;
text-decoration: none;
}
.post .left{
text-align: right;
color: #898989;
}
.post .left p.postmetadata strong{
display: block;
text-transform: uppercase;
}
.right{
background-color: #fff;
min-height: 150px;
}
.entry{
color: #3c3c3c;
}
.entry p img{
padding: 0 10px 7px 0;
float: left;
}
a.more-link{
display: block;
padding-top: 10px;
text-transform: uppercase;
}
这是一些需要处理的代码，看起来可能令人畏惧，但实际上非常简单！因为你们中的大多数人可能都具备足够的 CSS 能力，所以我会快速而敏捷地完成这一部分。
CSS 应该使它看起来像这样：
所以非常重要的是它在没有任何 JavaScript 的情况下看起来一切都很好 - 上面的内容补偿了我们。但要创建真正的报纸风格的降级标题，我们需要一些美味的 jQuery！打开“myTheme.js”，让我们开始破解吧！我们想要实现的目标是这样的（photoshop 模型）：
注意到区别了吗？我们将增加第一个“英雄”帖子标题的大小，并更改颜色。
然后，第二个或“恶棍”帖子将呈浅灰色，尺寸更小，之后的连续帖子将保持统一的尺寸。
我们将通过分别向第一个和第二个“.post”div 添加类“hero”和“villain”来解决这个问题，然后我们将使用一些额外的 CSS 对其进行样式设置。我们将类添加到 '.post' div 而不是 h2 元素，因为我们也想更改一些包含的内容，例如内容的大小和更多的附加图标 - “英雄”帖子中的链接。你问为什么是英雄和恶棍？因为恶棍总是在英雄之后出现。这是一个容易掌握的概念。
听起来很复杂，但实际上只有 4 行（间隔的）代码。这一切都进入“myTheme.js”：
$(document).ready(function(){
$(".post:first").addClass("hero");
$(".post:nth-child(2)").addClass("villain");
});
太棒了！非侵入式 JavaScript！我喜欢它！它应该位于“myTheme.js”中。
我们刚刚使用了 jQuery 极其强大、有价值且多功能的选择器的一小部分。现在，我们已经悄悄地将类“.hero”添加到页面上的第一个“.post”div，并将类“.villain”添加到页面上的第二个“.post”div。让我解释一下如何。
$(document).ready(function(){
这是 jQuery 的超级特殊函数，用于启动此行之后定义的 JavaScript 函数。当 $(document) 为 .ready() 时，启动我们即将定义的 function(){}。使用 $(document).ready(function(){ 比使用 'default': window.onload() 函数快得多，因为window.onload()函数等待整个文档加载。这包括所有图像、iframe等。我们只需要等待核心 XHTML 文档已完成加载以运行我们的脚本 - 因此我们使用 jQuery 的特殊 $(document).ready(function(){ 来加快速度，并减少初始浏览之间的延迟时间和 JavaScript 启动。有点令人困惑吧？为了简单起见，jQuery 的方法更快。记住这一点。
$(".post:first").addClass("hero");
强大的选择器太棒了！ jQuery 有一系列令人惊叹的选择器，其中一些来自 CSS3，但我们现在就可以使用它们。这一行告诉我们获取：$() 第一个 '.post' 元素：.post:first 并添加英雄类：.addClass("英雄”） 。我们现在可以在 CSS 中设置样式，但我们仍然没有以任何方式触及或更改“.post”div 的 XHTML 代码。
$(".post:nth-child(2)").addClass("villain");
更多超强选择器！ jQuery 不仅让我们选择一种元素的第一个元素，还让我们选择任意数量的元素！使用:nth-child(#)我们可以选择页面上我们想要的任何元素类型。如果我们想要页面上的第 30 个
，标记将为 $("p:nth-child(30)")。简单易懂吗？
jQuery 的选择器并不限于数字！还有更多选择器可让您选择所需的确切元素。您可以通过访问 jQuery 文档上的选择器部分来查看它们。
/*-----jQUERY-----*/
.hero .left p.postmetadata{
margin-top: 30px;
}
.hero .left p.postmetadata strong{
margin-bottom: 20px;
}
.hero .right h2{
font-size: 46px;
font-style: italic;
font-weight: normal;
margin-bottom: 0.5em;
}
.hero .right p{
font-size: 14px;
}
.hero a.more-link{
background: url(images/arrow_right.png) no-repeat right bottom;
float: left;
padding-right: 20px;
}
.villain .left p.postmetadata{
margin-top: 20px;
}
.villain .left p.postmetadata strong{
margin-bottom: 15px;
}
.villain .right h2{
font-size: 32px;
font-weight: normal;
color: #747474;
}
.villain .right p img{
float: right;
padding: 0 0 7px 10px;
}
现在你们应该已经足够熟悉 CSS 了，所以我将非常快速浏览一下这个新的 CSS。
这是更改“.hero”帖子外观的 CSS。
还有更改“.villain”帖子的 CSS。
干得好！在本教程中，我们介绍了使用 jQuery 选择器美化 WordPress 内容的基本方法！然而它们并不是 jQuery 独有的。您将在 CSS3 中找到所有这些选择器（当所有浏览器都支持时！）。我们只是喜欢 jQuery，因为他们现在将它们带给我们。这是我们的最终产品。
위 내용은 Wordpress와 jQuery를 사용하여 기본 신문 스타일 레이아웃 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
