Identify your user level and a specific application. Develop an SEO strategy. Determine what files need to be configured and modified to achieve your goals.
There are an unlimited number of ways to use WordPress and Flash together. The needs, ideas, and abilities of no two users will be the same. The limits are determined by you—by your skill level and the goals you set.
The first step is to identify your level of familiarity with the Web and Multimedia design software. Be honest in your self-assessment—and don't be discouraged, no matter where you are starting today. Understanding your user level allows you to set reasonable expectations. Take a look at the following figures to understand your user level. With practice and experience, by accessing the many free resources available online and through training tools (such as this manual), you will increase your level of proficiency.
You may be a new blogger, or may have been blogging for years. You may be an admin user supporting a team using WP for business or organizational needs, a theme designer, or a plugin developer. This book is written with you in mind, assuming that you are familiar with WP basics, or are willing to become so.
Flash takes care of your dynamic media needs, and WordPress makes it easy to administrate your site. The way to use them together is with SEO in mind.
In terms of density of information presented to a search engine, Flash is not as effective as XHTML, in spite of recent advances. A Flash animation can have a description tag, however, properly marked up XHTML that uses<h1>
and<h2>
to emphasize keywords and phrases, as well as including links to and from authoritative sources, will still have more SEO value when compared to a .swf
.
Many industries and audiences expect or require Flash animations. Your marketing and SEO strategy should determine how you mix WordPress and Flash. The goal is content that people can read and enjoy that is also understood by engines and robots. For those of us who administer or develop websites, ease of use is also a consideration.
In your design, when blocking in space for animations, consider how they are both dynamic and static. An animation does what it does, however lovely it is, and nothing more. Once a user has seen the animation, there is often no reason to pay attention to it again. WordPress offers dynamic content—areas of the page that highlight and excerpt the most recent content from different areas. This encourages users to revisit and explore your site for new content and to pay special attention to dynamic content areas. While an animation measures change in frames per second, WordPress allows your users to measure the changes made since their last visit. In this sense, Web 2.0 represents a true change in technology—transforming the screen itself into an animation that you program—simply by publishing new content.
So, some Flash is almost always fine. But too much Flash is less useful to search engines, relative to XHTML. Additionally, Flash animations generally take more time to update than regular WordPress content.
There are other ideas about how to combine Flash and WordPress, which we will touch on in later and more advanced chapters. Our approach should be applicable to the majority of users.
Flash media can be included anywhere in a WordPress theme: in the header, in a post or a page, in a sidebar, or in the footer. It takes some time to become familiar with your theme files—determining which PHP templates are called when different parts of the screen are clicked. An overview of how WordPress works is useful.
A theme has at least three views, which represent the steps to a given piece of information, moving from home page to a category to a post.
A WordPress home page is traditionally a dynamic display of updates from interior sections (like a dashboard). It can also be a static page. It's often named index.php
or home.php
.
The category archive view is a dynamic display of the posts in a category. It sounds complicated, but it is logical. When a user clicks on a category, not one piece of information is returned, but many. This template is called category.php
.
The archive view is so named because, though this piece of information may be featured in other parts of the site, the user has now arrived at the URL for an individual post. The URL can be used in links or bookmarks to refer back to this specific piece of information. Typically, the format is a long-reading pane.
page.php, sidebar.php, header.php
, and footer.php
work just like you'd think.
Knowing which PHP templates create pages on your blog is the first step to inserting a Flash animation directly into theme files. The next step is to determine specifically which<div>
will contain the animation. Firebug helps us match up the correct<div>
tag with the correct PHP template.
Get Firebug here: http://getfirebug.com/
Firebug is an add-on for Mozilla Firefox. This handy tool allows you to see the CSS and XHTML that make up any page by context-clicking (right-click in Windows or Ctrl-click for Mac) and choosing "Inspect Element." The window splits at the bottom. Bring your mouse down to the bottom-left pane. Hovering over a<div>
tag causes the screen to be highlighted: blue for<div>
width and height, purple for margins, and yellow for padding. Clicking on the blue <div> tag loads the bottom-right pane with entries from the CSS stylesheet that control its appearance. It is helpful to have such a visual representation to understand the structure of a site.
Note
Viewing the source (PC: Ctrl-U/Mac: Cmd-Opt-U) of a WordPress blog can be a confusing experience. Keep in mind that the XHTML output is different than the component PHP. Your templates are not what you see when you "View Source"—rather, you are seeing the result of dynamic PHP calls as XHTML, styled according to CSS. This is what makes WordPress dynamic—there are no webpages. There are only PHP templates waiting to output your website, recreated each time as the most recent content.
There are additional utilities we will be using throughout this book; a FTP client and a text editor are required for intermediate to advanced applications. Dreamweaver is an excellent tool for coding, if you have it. A fast running stand-alone text editor specific to coding has its own merits. Here are open-source utilities for Mac and for PC:
FTP Client: FileZilla, http://filezilla-project.org/download.php
Text Editor: Windows comes with Notepad and Mac has TextEdit, but these text editors are not set up to code for the Web. A text editor for coding gives you access to many additional tools and options, such as line numbers, keyboard shortcuts, and auto-formatting.
PC: NotePad ++, http://notepad-plus.sourceforge.net/uk/site.htm
Mac: jEdit, http://jedit.org
WordPress Theme Hierarchy, Chapter 7