(In which I continue taking apart a Wordpress theme to make it work with Graffiti. Part I. Part III. Part IV.)
Unpacking the downloaded zip file for Chronicles gave me this set of files:
OK, so I recognize the css file, but the rest are PHP files, and nothing like "layout". Oh well, time to investigate. index.php looks like it could be the equivalent of index.view, so let's take a look:
1: <?php get_header(); ?>
2: 3: <div id="main">
4: <?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
5: 6: <div id="blog">
7: <div class="entry">
8: 9: <?php if (have_posts()) : ?>
10: <?php while (have_posts()) : the_post(); ?>
11: 12: <div class="post" id="post-<?php the_ID(); ?>">
13: 14: <div class="date">
15: <?php the_time('M d Y'); ?>
16: </div><!--end of date -->
17: 18: <div class="post_title">
19: <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
20: <div class="posted">Posted by <?php the_author_posts_link(); ?> </div><!--end of posted -->
21: </div><!--end of post_title -->
22: 23: <br clear="all" />
24: 25: <div class="tags"><?php the_tags('Tags: ', ', ', '<br />'); ?></div><!--end of tags -->
26: 27: <?php the_content('Read more »'); ?>
28: 29: <div class="meta">
30: Filed under : <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
31: </div><!--end of meta -->
32: 33: </div><!--end of post -->
34: 35: <?php endwhile; ?>
36: <div class="navigation">
37: <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
38: <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
39: </div>
40: <?php else : ?>
41: <?php endif; ?>
42: 43: </div><!--end of entry -->
44: </div><!--end of blog -->
45: 46: <?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
47: 48: <br clear="all" />
49: </div><!--end of main -->
50: 51: <?php get_footer(); ?>
The thing I took away here is that there's a loop getting and displaying posts (the while loop) -- not that I fully understood it straight away --, there's a call to get the header at the top, and a call to get the footer at the bottom, and there are some calls to get the two sidebars. In other words, there's no equivalent to layout.view, the PHP file generates the whole page to display a list of posts.
All right, no problem. Let's build the layout.view. I'm going to guess the preamble to the layout will be found in header.php:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head profile="http://gmpg.org/xfn/11">
4: <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
5: <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
6: <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
7: <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
8: <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
9: <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
10: <?php wp_head(); ?>
11: </head>
12: <body>
13: <div id="wrapper">
14: 15: <div id="searchbar">
16: Search this blog...17: <div id="searchtext"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>
18: </div><!--end of searchbar -->
19: 20: <div id="header">
21: <div id="header_left_top"><!-- Hack for IE --></div>
22: <div id="header_left">
23: 24: <div id="subscribe">
25: <a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/subscribe.gif" border="0" alt="Subscribe to RSS Feed!"/></a>
26: </div><!--end of subscribe -->
27: 28: <div id="navigation">
29: <div id="menu">
30: <ul>
31: <li class="<?php if (((is_home()) &amp;&amp; !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><span><a href="<?php echo get_settings('home'); ?>">Home<?php echo $langblog;?></a></span></li>
32: <?php $params = wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
33: </ul>
34: </div><!--end of menu -->
35: </div><!--end of navigation -->
36: 37: </div><!--end of header_left -->
38: 39: <div id="header_right"><br />
40: <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
41: </div><!--end of header_right -->
42: 43: 44: <br clear="all" />
45: </div><!--end of header -->
This is more like it. Lots of headery type stuff. I copied this into a new file called layout.view, and looking at a real layout.view that came with Graffiti, converted the calls to the PHP interpreter to calls to Graffiti's Chalk markup.
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>$title</title>
5: $macros.Style("style.css","screen")6: <!--[if lte IE 7]>
7: $macros.Style("ie7.css","screen")
8: <![endif]-->
9: <!--[if lte IE 6]>
10: $macros.Style("ie6","screen")
11: <![endif]-->
12: 13: $macros.Head()14: </head>
15: 16: <body>
17: <img src='$macros.ThemeFile("images/CastleriggBrownTone.jpg")' border="0" class="centered" style="margin-bottom:0;"/>
18: 19: <div id="wrapper">
20: <div id="header">
21: 22: <div id="header_left_top"><!-- Hack for IE --></div>
23: <div id="header_left">
24: 25: <div id="searchbar"><br />
26: Search this blog...27: <div id="searchtext">
28: <form action="$urls.Search" method="get" >
29: <input type="text" alt="search this site" class="search-box" value="Search..." name="q" id="ls"
30: onblur="if (this.value == '') {this.value = 'Search...';}"
31: onfocus="if (this.value == 'Search...') {this.value = '';}" />
32: <input type="hidden" id="searchsubmit" value="Search" />
33: </form>
34: </div><!--end of searchtext -->
35: </div><!--end of searchbar -->
36: 37: <div id="navigation">
38: <div id="menu">
39: <ul>
40: $macros.NavBar() 41: <li><a href="$urls.rss">Subscribe</a></li>
42: </ul>
43: </div><!--end of menu -->
44: </div><!--end of navigation -->
45: 46: </div><!--end of header_left -->
47: 48: <div id="header_right"><br />
49: <h1><a href="https://boyet.com/">boyet.com/</a></h1>
50: </div><!--end of header_right -->
51: 52: <br clear="all" />
53: </div><!--end of header -->
(As you can see I indented the code an awful lot and moved a couple of things around: the subscribe link was too big, so I made it part of the menu at the top, and I added my own image to the top of the page.)
The interesting Graffiti bits are the calls to the $macros Chalk object. $macros is a "library of tools to build a view" and here I've used the Style, Head, ThemeFile, and NavBar methods. These make use of the configuration of Graffiti on my website to embed the right URLs and to render the navigation bar setup in the Graffiti control panel.
You'll also see calls to $title, which is replaced by the main title for the site from the Graffiti control panel, and $urls, which renders various special URLs for the site (here,the RSS feed).
Converting the footer was even simpler.
Finally I completed the layout.view file by adding a call to $childContent. It's this magic method that renders the content of the page, and will include index.view or post.view accordingly. We'll talk about them next time.
Loading links to posts on similar topics...
No Responses
Feel free to add a comment...
Leave a response
Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.
_emphasis_**strong**[text](url)`IEnumerable`* an item1. an item> Now is the time...Preview of response