Head First WordPress

headfirst wordpress
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Whether it's just you and your desire to let everyone know about your growing collection of hand-crocheted Star Wars figures,or a big company with hundreds of products,blogging let's anyone publish online without having to be a genius about HTML,CSS,or any other programming.In this chapter,you'll learn how to get hosting for your blog, install WorldPress, and create and publish your first blog post.

无论是你只有你和你的愿望,让每个人知道你的成长集合.手工钩织的"星球大战"的数字,后者是一个有着上百种产品的大公司,博客让我们的人在网上发布,而不必是一个天才HTML,CSS,或任何其他的编程.在本章中,你将学习如何为您的博客获取主机,安装WordPress,以及创建和发布您的第一篇博客文章.

desire:愿望
know about your growing:知道你的成长.

So we said that WordPress is installed on a web server.A web server is simply another computer somewhere that you can access the Internet.At its most simplest,a web server delivers web page to other computers over the Internet.But most servers also allow you store/upload files,run programming scripts,and even allow other people(your site visitors)to contribute content as well(such as comments on your blog)

These two parts----creating the blog and someone viewing the blog---happen asynchronously.That is,they don't neccssarily happen at the same time.You create and publish your blog,or days later.In the middle of it all is the web server,which acts both as host for your blog's files,and as the mechanism that serves it all up to anyone who wants to read your blog.

asynchronnously:异步

Hey I really need your help! I want to start a blog but don't even have the time to figure out where to begin...

Share his neverending stream of ideas
分享他永无止境的观点

Your friend Jay has sent over the first post he wants up on the site.Now that the installation is complete we're ready to start adding content to our blog.(soon you'll be able to setJay up to post on his own,but for now we'll get things started for him.

Everything you need to write your first post can be found in the Posts menu from the dashboard.
dashboard:仪表盘
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
draft:草案
pending review:正在等待审核
publish:发布
visibility:可见
immediately:立即
process:过程
snapshot:快照
modify:修改
ability:能力,才能
mimics:模仿
tags:标签
brackets:括号
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Use both editors when creating new sports
WordPress has two editing modes:Visual and Makeup.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
In this mode you can highlight text,apply styles and see the results immediately --as they'd look on the live site.
这种模式下,你可以高亮显示文本,应用样式和你看到的结果作为在线上的样式.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
That was pretty easy!But hmmm,there is another post we didn't even create on the Acme Bit blog.Where did that come from ?
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
From the list of posts(Posts> Edit) you can select and remove any post you want--just like a comment on the dashboard.

Images are a powerful on the Web and are an integer part of any blog.However,when we use images on the Web,we need to make sure they are sized and formatted properly so they look good and can be loaded quickly when someone visits your site.

GIF and PNG8 are smaller file formats perfact for icons and non-photographic images.They also have a limited color palette(256 colors).
JPEG and PNG24 reproduce photographic images much better than GIF but with slightly larger file sizes.That means they will take longer to load.
PNG-24 allows you to do transparent backgrounds(not available in JPEG) but this is not supported by Internet Explorer 6(which lot of people still use).

Also Photoshop is by far the most popular image editing program---it's not the cheapest and it can be overkill if all you need to do is resize and prepare images for the Web.Here are some free alternatives for simple image editing.
like GIMP/Picnik/Paint.NET
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.Upload bits.png to Picnik.
2.Click on save and Share to export photo
3.Save to your computer
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Prepare to upload
Depending on your web host and their support for WordPress,you may be greeted with a permissions-related error when you try to upload an image or other media file to a post.This happens when the code that runs WordPress does not have permission to create or write to folders on your server.This is pretty easy to fix, but first a litter background on what's going on under the hood.

under the hood:引擎盖下
The first thing you'll need to be is add a folder called "uploads" in the wp_content directory.WordPress will try to create this for you but may not be successful.

Using your FTP client you can right click to "get info" on a folder and see its permission Here we see that only the owner can write,which means WordPress can't

Update group permissions to get image uploads working.
1.Launch your FTP client
You'l need some way to access folders on your server---log in to your FTP server and navigate to the main WordPress directory.
2.Right click and "Get Info"
Create the folder "uploads" within the wp-content directory then right click and select "Get info" .A dialog box similar to the one on the right should appear.

There are two things you need to change :
1.Change the group user to whatever the web server runs as (usally www,apache,or nobody) and 2. Give the group "write" permission .You should end up with the numbers 775 in the "octal" window.

The "octal" is numeric representation of a particular file or folder's permission.000 is no access and 777 is everyone have access.

The image that Jay gave you too big to fit into the post properly.Download bits.png from www.headfirslab.com/wordpress ,and then use Picnik to resize the image and export it as a high-quality PNG-24.

1.Re-upload your bits.png image
Once your directory permission have been fixed,you should be able to upload been fixed ,you should be able to upload media within WordPress.A thumbnail will apear on the left and should be a cropped or smaller version of the file your desktop.

set the image size
Wordpress will try to slightly scale down your image by default.Since we've already prepped our image for the Web,select the "full size" radio button so we get out full 500 pixel width image.Finally ,click "Insertt into Post" to add the image to the post.

All Wordlpress does is just display an image at a smaller size ----it doesn't actually resize the pixels like Photoshop or Picnik would.

You've got Chapter 1 under your belt and now you've added a basic blog and your first post to your toolbox.Next up, making your blog looks more like,well ,your blog.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
How can I stand out in this crowd?
我如何从人群中脱颖而出.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
You've finally got your own blog.But it looks so...generic.
Time to make it your own.WordPress comes preloaded with lots of themes you can apply to your blog, but we're going to go one step further and make our own custom theme.Along the way,you'll learn some basic HTML and CSS to really make your blog look exactly how you want. We'll also delve into CSS rules, which allow you to quickly change how your blog looks, and take advantage of WordPress widgets to easily add sidebar content to the blog.

delve:深入

The Acme Bit Company website is a really simple site with only three pages that cover the basic infomation about their main products:Bits.Even though the site isn't a blog, it's based on the same stuff as our WorldPress blog:HTML and CSS.
We can definitely use that to our advantage .Let's start by visually comparing the main site with the blog, to see what they have in common ,and what is different across the two sites.

Identify 鉴定
confuse visitors:混淆访客

This might seem like a daunting task,but once you dive into HTML and CSS you'll see how easy this is to do.
Both of our sites are actually very similar and share design elements.This meant that we should be able to use a lot of the Acme Bit Company websites HTML and CSS to able to use a lot of the Acme Bit Company website HTML and CSS to get the design transfered over to the blog.We'll use the defaul WordPress theme as a template to creat our own Acme Bits theme.

A theme tells WordPress how and where to display your content and images.

index.php
The part of the theme displays the home page and a list of posts in reverse chronological order(most recent first).We'll talk about why it has ".php" end in a minute.

search.php
Search result pages show a title for each post that matches the search query.

single.php
Single post pages display a post in its entirety and provide a way for visitors to comments on the post.

things like fonts,colors,layout, and much more remains consistent across all these files automatically.They're often called template files.

The same content and images look different across different themes.

Wordpress themes are a collection of template files....
Each template file in a theme has speciafic job.One might display only the sidebar and another might be used to render a comment form.You can also add your own custom template files that can be used for just about anything you want within WorldPress.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
My own Theme

footer.php sidebar.php
header.php index.php
comments.php style.css

A theme can be as small as the two required files:index.php and style.css. Everything else just adds extra organization and functionality.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Think of your WorldPress theme as an orchestra conductor:there's a ton of instruments that each have their own role, tone, and notes to play, but they all need to combine together to make something that sounds wonderful.

a ton of 一吨的.

style.css
header.php
index.php
footer.php
comments.php

These are the only required file for a theme.Index.php displays your main blog home page,and style.css dictates how it and many other pages,if you have them ,will look:fonts , background color, and much more.we'll look at both of these in more depth shortly.
________style.css
These files contain into about what images and/or text should show up at the top and bottom of your blog, across all pages.
_______footer.php
We're going to look more closely at what these.php files actually do on the next page....
_____index.php

Comments.php supports the functionality for people who visit your blog to enter their comments on your posts.
___comments.php
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

PHP is the logic behind your theme.
Because your blog is essentially a big collection of lots of little diffrent files,something has to pull that all together to create one page when someone types in your blog's URL.

PHP is a scripting language,and the "scripting" part refers to the fact that PHP essentially designates what is "said" or "done" by the HTML of your blog.

So is that why so many of the themes's template files end with .php?
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
extension 延期

In order for our theme to function properly,all template files must have a .php extension.We can still put HTML inside of them,we just can't use an .html extension.

What's not going to make you write your own PHP!
php is a powerful web scripting language that is used all over the Web to build interactive applications(WorldPress includes).It's also way beyond the scope of this book,so we're not going to cover it here.We'll use some PHP ,but it will be code already written for other themes.

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Match the WorldPress template file with its theme function.

functions.php
Display a full blog post with title,meta data and a comment form.If the post has comments,those are displayed as well.

single.php
Displays a "page not found" message and can potentially direc the visitor to an alternate page for the one they may have been looking for.

404.php
Display the top of the .html for all other theme files.Contains page titles and calls to other resources like stylesheets and Javascripts.

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Wordpress theme files are a collection of HTML,text,and special template tags that tell WordPress what to display in a particular area of the blog.Remember,even though they contain HTML,all template files in WordPress are saved as PHP.Let's take a closer look at a sample template file:
Let's take a closer look at a sample template file:
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<?php
/**
* The main template file
*
**/
<?php get_header(); ?> //The get_header() function display the contents of header php
<div id="container">
<div id="content">
<?php
/**
Run the loop to output the posts
If you want to overload this in a child theme then include a file
called loop-index.php and that will be used installed.
**/
get_template_part('loop','index');// This is called "The loop"--with it ,most of the WorldPress page and post content is displayed.

?>
</div>
</div>
<?php get_sidebar(); ?> //we can display the siderbar and footer just like we displayed the header
<?php get_footer(): ?>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Create a new theme
Before we can start changing the way the blog looks,we should copy the current theme so we can modify it to look like the Acmc Bit site.That way if we mess anything up or don't like the results,we can always just go back and use the original theme again.We're going to need to jump back into our FTP client to do this.

Navigate to the themes folder:--->导航到主体栏目

Connect to your web server using FTP and in the wp-content folder,you'll find a directory called "themes".Inside is the default "twentyten" theme that got installed when you create your blog.We're going to copy it and modify it to make our own custom theme.

连接到wp-content 文件夹,找到目录为themes的.在其中里面的有一个twentyten主题,安装你创建的博客.我们去复制,然后进行修改.

The theme that comes with WordPress is designed to work well with lots of different content and use seemarios.It will be the perfect base template for our new Acme theme.

Copy "twentyten"
Duplicate the twentyten theme and all its files and them rename the folder to "acme" or something similar.

Depending on what FTP client you use you'll either need to duplicate the folder or create a new folder and copy them contents of "twentyten" to the /acme directory.Just remember to copy so the original files stay where they are.

Check your files:
Navigate to the /acme directory in your FTP client and make sure all the files are there.It should look identical to the "twentyten" theme .At this point our "Acme" theme should have the exact same set of files as the orginal "twentyten" theme.

identical 相同
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

These two themes still look exactly the same.How are we going to make this look like the Acme site?

Stylesheets dictate the look and feel of pages in WordPress.
Cascading Style Sheets(CSS) are stan

<head>
....
<link rel="stylesheet" type="text/css" media="all " href="<?php bloginfo('stylesheet_url'); ?>" />

</head>

<head>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
</head>

Rules do a lot of work for you.

A CSS rule describles what something should look like,such as the color or font of text ,or where things line up on the page/

Rules do a lot of work for you
A CSS rule describes what something should be look like,such as the color or font of text,or where things line up on the page .
The really cool thing about rules,though, is that they're reusable.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
reusable:可重复使用的
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
You just update the CSS rule for the <p> element,and voila.Your new font is automatically updaged everywhere on your site.

automatically:自动

As we just saw, the main role of style.css in a WorldPress theme is to tell your web browser how to display your blog.Colors ,fonts,images,layout----all those settings are specified inthe CSS file. However ,WorldPress also uses style.css to store more "meta" information about the theme,like the author ,version and a description of the theme itself.