thiết kế giao diện wordpress phần 4 pot

Theme Design and Approach [ 54 ] You can see our nal result once we erase the lines and text that will be set to display:none or text-aliged out of the way: Slice and Export When getting ready to slice your images for export, keep in mind that via the background properties in CSS you can control the top, bottom, left, or right placement, x and y repetition, as well as make the image non-repeating. You can also set the background image to 'xed', and it will not move with the rest of your page if it scrolls. Chapter 2 [ 55 ] You'll need to look at your design and start thinking in terms of what will be exported as a complete image, and what will be used as a repeating background image. You'll probably nd that your header image is the only thing that will be sliced as a whole. Many of your background images should be sliced so that their size is optimized for use as a repeated image. If you notice that an image can repeat horizontally to get the same effect, then you'll only need to slice a small vertical area of the image. Same goes for noticing images that can repeat vertically. You'll only need to slice a small horizontal area of the image and set the CSS repeat rule to repeat-x or repeat-y to load in the image. Theme Design and Approach [ 56 ] If you'd like more information on how to slice and work with background images, repeating and non-repeating for use with CSS, check out this article from Adobe's site: http://www.adobe.com/devnet/dreamweaver/articles/ css_bgimages.html Now that you've placed the slices for each of your theme image elements, export them using the smallest compression options available. Once you have each image, you can import them using the background-image, background-repeat, background-attachment, and background-position CSS properties. Using CSS 'shorthand' you can handle all of that, including the background-color property via the plain background property, like so: background: #fff url(img.gif) no-repeat fixed 10px 50%; After including our header image, I need to remove the text-header information. Rather than just deleting it from the XHTML page, I set the display for h1, h2, and p to none. That way, people who view the content un-styled will still see appropriate header information. I've also added a #date id so that I can have the current month and year displayed under my magazine text, just like a print magazine. Here are our #header id rules: #header { width: 930px; height: 250px; background: url(“images/oo_mag_header.jpg") no-repeat left top; } #header p, #header h1, #header h2/**/ { display: none; } #header #date{ position:absolute; font-family: Georgia, Times, serif; font-size: 16px; margin-top: 160px; margin-left: 25px; color:#253A59; } Chapter 2 [ 57 ] And here are our #top_navlist id rules, that use a single image rollover technique: #top_navlist { position: absolute; top: 260px; width: 897px; text-align:right; } #top_navlist h2{ display: none; } #navlist{ padding: 10px 10px; margin-left: 0; border-bottom: 1px solid #ccc; font-family: Georgia, Times, serif; font-weight: bold; } #navlist li{ list-style: none; margin: 0; display: inline; } #navlist li a{ padding: 11px 30px; margin-left: 3px; border: none; border-left: 1px solid #ccc; background: #8BA8BA url(images/oo_mag_main_nav.jpg) no-repeat top right; text-decoration: none; color: #253A59; } #navlist li a:hover{ background-color: #9E9C76; background-position: right -37px; border-color: #C5BBA0; color: #784B2C; text-decoration: underline; } #navlist li.current_page_item a{ border-bottom: 1px solid white; background-color: #fff; background-position: right -74px; } #navlist li a:visited { color: #253A59; } Theme Design and Approach [ 58 ] Wellstyled.com has an excellent tutorial on how to use a single image technique to handle image background rollovers with CSS (http://wellstyled.com/CSS-nopreload-rollovers.html). To see the full and nal CSS mockup style.css and index.html page, please refer to the code download section in the Preface. The nal theme mockup looks like the following in our Firefox browser: Chapter 2 [ 59 ] Yes, the nal XHTML/CSS mockup is very similar to the Photoshop mockup. It should be almost perfect! You may still notice some slight differences. As I was putting the images into CSS, I discovered that I rather liked having each gradient section outlined using the same base color of the gradient, so I just left some border properties in the stylesheet and changed their color. I also tested out my top_navigation rollover images by adding an extra link (not sure the WordPress site will have a need for a reference page, but if it ever needs it, it can have as many links as can t across the top there!) and some plausible text to make sure the link area expands with the extra text. Summary You have now learned the key theme design considerations to make when planning a WordPress theme. We've also created a great XHTML/CSS mockup. Let's dive right in to cutting it up into a fully working WordPress theme! [...]... out more about the WordPress Template Hierarchy: Certain WordPress template pages will override other pages Not being aware of which files override which ones within your template hierarchy can make troubleshooting your template a real pain We'll talk about this more in Chapter 6 which deals with WordPress Reference, and you can read through the WordPress codex online at http://codex .wordpress org/Template_Hierarchy... Congratulations! That's your first bit of WordPress code You should now see your styled mockup when you point your browser at your WordPress installation We're now ready to start adding WordPress theme code The Loop The next (and I'd say, the most important) bit of WordPress code that I like to tuck into my mockup file is called 'The Loop' The Loop is an essential part of your WordPress theme It displays your... the following links on WordPress. org's codex site: http://codex .wordpress. org/The_Loop_in_Action http://codex .wordpress. org/The_Loop I'll start by pasting the following code (which I've copied from the default theme's index.php loop) into my widest column under my This Month: header, overwriting the sample content This code will ensure that the sample posts I've added to my WordPress installation will... this is great!' spot When you get to these points, get in the habit of using the 'Save a Copy' feature to make backups Your future-futzing-self will love you for it Let's Build Our Theme Have your HTML editor open and set up to display a FTP or local working directory panel so that you have access to your WordPress installation files Also, have a couple of browser windows open with your WordPress home... http://wpdev.eternalurbanyouth.com/ Description: A WordPress Theme created originally for InsideOpenOffice.org and then modified for Packt Publishing's WordPress Theme Design Version: 1.3 Author: Tessa Blakeley Silver Author URI: http://hyper3media.com The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ 5 In your WordPress go to Administration... come with my installation of WordPress Before I actually deploy the theme, I'll remove the '1' from the name in the stylesheet You may do the same when you develop, or you may chose to intentionally name your theme with a number or the letter 'A' so that it shows up closer to the top within the list of themes Including WordPress Content When you point your browser to your WordPress Installation, you... your mockup's image directory as well as your index.html and style.css mockup files to the directory, and rename your index.html file to index.php 3 Add WordPress PHP code to your design so that the Word Press content shows up 4 Once your theme's WordPress content is loading in and your XHTML and CSS still work and look correct, then you can easily pull it apart into your theme's corresponding template... PHP bits of code wrapped in XHTML markup If by some chance you have no posts to show, the default is to display WordPress' searchform.php file Unfamiliar with the Loop? 'The Loop' is one of those core pieces of WordPress PHP code you should brush up on Understanding how 'The Loop' works in WordPress is incredibly helpful in letting you achieve any special requirements or effects of a custom professional... starts to break, you can narrow it down to WordPress PHP code that wasn't copied into its own template file correctly and you have base files to go back to with the clean code (because you've kept the original default theme files, as pointed out in step 1), so you can try again Why does WordPress have its theme spread across so many template files? In a nutshell, WordPress does this for powerful flexibility... WordPress installation files Also, have a couple of browser windows open with your WordPress home page loaded into it as well as the WordPress Administration Panel available Tabs! Use them They're one of those neat built-in FireFox features we were talking about Keep all your WordPress development and admin views in one window Each tab within a FireFox window is accessible via Ctrl+1, Ctrl+2, etc keystrokes . follow Michael Doig's instructions to install WordPress at http://michaeldoig.net /4/ installing-mamp-and -WordPress. htm. Understanding the WordPress Theme Let's get familiar with the parts. more in Chapter 6 which deals with WordPress Reference, and you can read through the WordPress codex online at http://codex .wordpress. org/Template_Hierarchy. 4. After you've made a copy. of these elements, together with your template les, make up your complete WordPress theme. Coding It Up [ 64 ] Your WordPress Work Flow Your work ow will pretty much look like the following: You'll