WordPress Word Press The Missing Manual (2nd Ed.) [Mac Donald 2014 07 12]
User Manual: manual pdf -FilePursuit
Open the PDF directly: View PDF .
Page Count: 613
|Open PDF In Browser||View PDF|
) that, in turn, inserts the space you want. 166 WORDPRESS: THE MISSING MANUAL CUSTOMIZING YOUR WIDGETS FIGURE 5-23 Left: At its simplest, the Text widget displays a title (formatted according to the theme you’re using) with one or more paragraphs of text underneath. Right: Add some HTML, and the Text widget looks a whole lot fancier. It’s almost as easy to put HTML in the Text widget. First, turn off the “Automatically add paragraphs” settings. Then, type in your content, with the exact HTML tags you want. Here’s an example that puts a word in bold type: The following word will be bold on the page. And here’s the HTML-formatted text from Figure 5-23 (right): The Magic Tea House is a quirky mash-up: it's a fine tea importer with the rarest gourmet teas, and a music venue for small-venue jazz, chamber, and coffeehouse bands like:
- The Black Teas
- Cosmic Harmony
- Samantha Told Me So
element, a level-2 heading uses
and so on.
The heading level you use depends, at least in part, on your theme. Here are some
• Don’t use level-1 headings inside your posts, because they’ll clash with the main
post title or the website title, confusing search engines and assistive devices
like screen readers.
• If you use a modern theme, use level-2 headings to subdivide a post. This is the
right approach for the standard year themes, from Twenty Eleven on.
• If you use an older theme, you may need to use level-2 or level-3 headings when
subdividing a post. First, try level-2 headings. If they appear in the published
page with the same type size as the post title, use level-3 headings instead.
The size, typeface, and exact appearance of a heading depend on your theme. You won’t see exactly
what your heading looks like until you preview or publish your page.
Showing a Code Listing
You may notice that the Format list has more than just headings in it. It also includes
the Paragraph, Address, and Preformatted formats, which map to the HTML elements
, respectively. 174 WORDPRESS: THE MISSING MANUAL WordPress uses the
element to style ordinary paragraphs, and you’ve already seen plenty of those. Theelement is meant for contact information about who wrote the page, but it’s rarely used. But theelement is more useful—it displays text in a fixed-width font, which is ideal for listing programming code or simulating computer output (Figure 6-3). MAKING FANCIER POSTS FIGURE 6-3 In some themes, WordPress formats the text of aelement using a gray background or gray outline (the latter shown here for the “alert” line in the Twenty Twelve theme). That visually separates the-formatted text from the rest of the content on the page. (Remember to use Shift+Enter to add line breaks between each line of code, rather than just Enter, which would add extra spacing and start a new paragraph.) Adding Links The Web wouldn’t amount to much without links, those blue underlined bits of text that let you jump from one web page to another. You can easily add links to a post. For example, imagine you have this sentence: This story was reported in The New York Times. To turn “The New York Times” into a link, select the text, and then click the Insert Link button in the toolbar. A window appears where you can either supply a full website address or link to one of your own posts (Figure 6-4). NOTE If you want to link to a file—for example, a document that your guest can download or a picture she can view—you need to store that file in WordPress’s media library. You’ll get the full details on page 186. To remove a link, click anywhere inside the link text and then click the Remove Link button (which is right next to the Insert Link button in the toolbar). Chapter 6: Jazzing Up Your Posts 175 MAKING FANCIER POSTS FIGURE 6-4 To add a link to a post, you need to supply the URL (the website address) and a Title (the text that appears in a tooltip when a visitor points to the link). Alternatively, you can search for a post on your own site and insert a link to it. Either way, clicking Add Link seals the deal. Inserting Special Characters Special characters are usually defined as characters you don’t see on your everyday keyboard. For example, if you use a standard U.S. keyboard, special characters include things like accented letters and typographic symbols. WordPress lets you drop in one of a small set of special characters using the Insert Custom Character command. Click it, and a window appears with a grid of unusual characters. Point to one to get a close-up look at it, and then click it to close the window and insert the character into your post (see Figure 6-5). You may not need all the special characters you think you do. WordPress automatically substitutes special characters for some character combinations. For example, if you type two dashes (--) between words, WordPress turns them into a seamless en dash (–) when you publish the post. Three dashes in a row creates a slightly longer em dash (—). Similarly, WordPress turns ordinary straight quotes ("") into typographically correct quotation marks (“”). It works the same magic with apostrophes. 176 WORDPRESS: THE MISSING MANUAL MAKING FANCIER POSTS FIGURE 6-5 Here, you’re about to insert the copyright symbol into a post. NOTE The oddest special characters you can use with WordPress are smilies, character combinations like :) that turn into emoticons like . WordPress performs this substitution automatically, and you can find out what smilies you can use (and the characters you need to type to trigger them) at http://tinyurl.com/using-smilies. On the other hand, if the smilies feature is running amok and changing character sequences you don’t want it to, choose Settings→Writing and turn off the checkbox next to “Convert emoticons like :-) and :-P to graphics on display.” FREQUENTLY ASKED QUESTION Formatting Your Text How can I adjust typefaces and font sizes? WordPress’s post editor lets you structure your content (for example, put it into lists and headings), add more content (like pictures), and apply certain types of formatting (like boldface and italics). However, there are plenty of formatting details that aren’t under your control. The size and typeface of your fonts is one of them. This might seem like an awkward limitation, but it’s actually a wise design decision on the part of the people who created WordPress. If WordPress gave you free rein to change fonts, you could easily end up with messy markup and posts that didn’t match each other. Even worse, if you switch to a new theme, you’re stuck with your old fonts, even though they might no longer suit your new look. Fortunately, there’s a more structured way to change the appearance of your text. Once you’re certain you have the right theme for your website, you can modify its styles. For example, by changing the style rules, you can change the font, color, and size of your text, and you can either make these changes to all your content, or to just specific elements (like all level-3 headings inside a post). Modifying styles is a great way to personalize a theme, and you’ll learn how to do that in Chapter 13. However, there’s one caveat—if you use WordPress.com to host your site, you need to buy the Custom Design upgrade to edit your styles (page 457). Self-hosted WordPress sites don’t have this restriction. Chapter 6: Jazzing Up Your Posts 177 MAKING FANCIER POSTS Using the HTML View All the toolbar buttons you studied so far work by inserting the right HTML into your posts, behind the scenes. But if you’ve got a bit of web design experience, you don’t need to rely on the buttons. Using WordPress’s HTML view, you can directly edit your post’s HTML markup. You won’t be limited by the buttons in the toolbar—instead, you can enter any HTML element you want. To switch to HTML view, click the Text tab that sits just above the post content box, on the right (Figure 6-6). To go back to the visual editor, click the Visual tab. In fact, there’s no reason you can’t spend time in both places. For example, you might write your post in the visual editor and then switch to HTML view to inspect the markup. HTML view gives you a slightly different toolbar. It still has the useful “full screen” button, but most of the other shortcuts, which insert various HTML tags, aren’t much help—if you’re savvy enough to prefer the HTML view, then you probably want to type in your markup by hand. FIGURE 6-6 Here’s the same document—with a heading and a list—shown in both the visual editor (left) and the HTML editor (right). If you’re a seasoned web designer, you might feel that WordPress’s HTML editor isn’t up to snuff. Full HTML editing programs like Adobe Dreamweaver are packed with little frills that can make editing easier—for example, they automatically add closing tags to HTML elements and suggest possible tag names as you type. (HTML editors also have more powerful layout and styling features, but those features make more sense when you’re designing the look and layout of an entire site, not just adding a bit of content to a post.) Most WordPress developers don’t need the full features of a program like Dreamweaver. But there are exceptions. If you write long, complex posts—for example, the articles you saw in the Internet Encyclopedia of Philosophy (page 12)—you probably don’t want to do all your editing in a web page window. Hardcore HTML lovers who find themselves in this situation can write posts in an HTML editor like Dreamweaver, copy the markup, and then paste it into WordPress’s Text content box. But don’t try this unless you really understand your markup. You don’t want to transfer a 178 WORDPRESS: THE MISSING MANUAL whack of formatting details to your WordPress post, like a element that has hardcoded font settings. If you do, you’ll introduce some serious issues, including inconsistencies between posts and problems changing themes. MAKING FANCIER POSTS Getting a Better Post Editor Most WordPress fans do their work directly in their web browsers, using the WordPress editor. But if you’re working with long documents and you’re missing your favorite conveniences, you have other options. One is to upgrade your WordPress editor. This approach makes sense if you’re happy creating your posts in the familiar Add New Post web page but don’t feel like you’re getting enough help from WordPress. Using a plug-in, you can swap in an editor that has a bit more muscle. (Of course, you’ll need a self-hosted WordPress site to change your editor, because WordPress.com doesn’t let you add plug-ins.) You can search for a pumped-up post editor on the WordPress plug-in page (http:// wordpress.org/plugins), as explained in Chapter 9. Plenty of them offer advanced features like search-and-replace, style-based editing, and support for creating tables. One of the most popular is TinyMCE. Check it out at http://tinyurl.com/tinyeditor and learn about installing plug-ins on page 287. Another solution is to do your post-writing work in another program. You’ve already learned that you can paste in pure HTML using the WordPress editor’s HTML view (page 178), but this technique is a bit touchy—paste in the wrong markup and you can scramble your site. A better approach is to use a program that lets you compose rich content, and then posts that content to your site safely and cleanly, without an awkward cut-and-paste step. On a Windows computer, you can use Microsoft’s free Windows Live Writer to compose properly formatted posts on your desktop, even if you don’t have an Internet connection. When you’re ready, a single click publishes the posts on your blog. Windows Live Writer is available free at http://tinyurl.com/win-essentials. Mac fiends can find similar blog-writing tools, including the popular—but, sadly, not free (it’s $40)—MarsEdit (www.red-sweater.com/marsedit). NOTE WordPress has a list of even more desktop post editors for Windows, Mac OS, and Linux at http:// tinyurl.com/blog-client. Most offer handy formatting features, and all of them let you compose your work offline. Finally, Microsoft Word lovers can use their favorite word processor to write WordPress posts using the little-known “Blog post” template. Word asks for your site’s URL, user name, and password, after which it lets you create new posts and edit old ones, all from the comfort of the Word window. TIP Although it’s tempting to do your WordPress work in Word, with its silky smooth formatting features and AutoCorrect, the free Windows Live Writer program is still a better choice. That’s because Windows Live Writer offers a few key features that Word omits, like the ability to schedule a post for future publication (page 100), add tags, and edit your post’s slug (page 120). Chapter 6: Jazzing Up Your Posts 179 ADDING PICTURES Adding Pictures You’ve now toured many of the post-enhancing features the Add New Post page offers. But there are several frills you haven’t yet touched. The most obvious is adding graphics. Virtually every good WordPress site can be made better with pictures. WordPress gives you several ways to do that, from the obvious (plopping them into your posts, alongside your text) to the more interesting (using them to build photoblogs, create slideshows, and advertise new posts on your home page). In the following sections, you’ll learn how to take advantage of these slick picture tricks. Putting Pictures in a Post The most obvious place for a picture is in a post, right along with your content. WordPress makes it easy to insert pictures as you create a post (on the Add New Post page) or edit one (on the Edit Post page). In fact, you can put as many images as you want into any post. 1. In a post’s edit box, click the spot where you want to add a picture. It doesn’t matter whether you use the visual editor (the Visual tab) or the HTML editor (the Text tab). If you use the visual editor, you’ll see every picture you insert right next to your post text. If you use the HTML editor, you’ll see the raw HTML markup for each picture. This markup includes an element for the picture, wrapped in an anchor element that turns the picture into a link so readers can click it to see the full-size image, and possibly some other elements, like a title or a caption. 2. Just above the box where you type in your content, click the Add Media button. The Insert Media window appears (Figure 6-7). It gives you three ways to find a picture: You can upload a file from your computer (using the Upload Files tab), use a file you already uploaded to WordPress’s media library (using the Media Library tab), or grab a file that’s stored on another website (by clicking the “Insert from URL” link on the left). In this example, you want to stick to the Upload Files tab. Grabbing pictures from other websites (using “Insert from URL”) might be worthwhile if you store graphics on another part of your site. But if it’s someone else’s site, don’t chance it—the risk that the picture is copyrighted, or that the webmaster could change or move it to a new address, is too great. The Media Library tab is also useful, but only after you build up a collection of pictures. You’ll take a look at it on page 186. NOTE The Insert Media window also has links for creating a picture gallery (page 330) and setting your post’s featured image (page 190). WordPress.com users will see even more links, for adding tweets and YouTube videos. Ignore all these details for now—you’ll revisit them soon enough. 180 WORDPRESS: THE MISSING MANUAL ADDING PICTURES FIGURE 6-7 Using the Upload Files tab, you can insert one or more pictures from your computer into a post. First, drag a picture into the Insert Media box. Once you release the image, WordPress begins uploading it. 3. Pick the files you want to upload. WordPress gives you two options. The quickest approach is to drag files from an open file browser window (like Windows Explorer or the Mac’s Finder) and drop them in the Insert Media window box. You can drag as many files as you want, either all at once or one at a time, and you can keep dropping in new files before WordPress finishes uploading the old ones. Your other option is to pick your files from a standard dialog box. To do that, click the Select Files button, browse to the right folder, and then pick what you want. Ctrl-click (Command-click on a Mac) to select multiple files at once. TIP If your files are really big, uploading just isn’t practical (and it might fail halfway through). For example, it’s probably a bad idea to upload files straight from your 22-megapixel digital camera. To save time, scale it down in an image-editing program first. Once you upload your files, WordPress switches to the Media Library tab, which lists all the images you ever added to your site. It puts new pictures at the top of the list. If your files are particularly large (or your web connection is particularly slow), you’ll see a progress bar ticking along, tracking the upload progress of each file. When WordPress finishes an upload, it replaces the progress bar with a thumbnail of your image. On the right, a pile of text boxes asks you for all kinds of information about your picture (see Figure 6-8). Chapter 6: Jazzing Up Your Posts 181 ADDING PICTURES FIGURE 6-8 Here, WordPress has just finished uploading the file dead_elvis_tattoo. jpg. Currently, it’s the only file in this site’s Media Library. Before you insert it into your post, you need to enter a bit of information. TIP If you plan to upload your picture using the drag-and-drop approach, here’s a valuable shortcut. Instead of clicking the Add Media button to get started, just drag the picture right onto the post editor in the Add New Post page. WordPress will open the Insert Media window, take you to the Media Library tab, and start uploading your picture. You can then carry on with step 4. 4. Scroll down and fill in the information for your picture. WordPress asks for the following: • Title is the text that appears in a tooltip when someone points to a picture. • Caption adds an optional caption that appears on the page near your picture. Different themes handle captions differently, but they usually place them under your picture, as in Figure 6-9. Captions can include HTML tags (for example, for bold formatting), but you need to add them yourself. • Alt Text is the alternate text sent to assistive devices (like screen readers) to help people with disabilities interpret pictures they can’t see. 182 WORDPRESS: THE MISSING MANUAL • Description is a longer, more detailed explanation of the picture. You can use it for your records, or you might decide to display it on your page—but you need to find a theme that shows image descriptions (most don’t) or edit your theme by hand (Chapter 13). If you don’t plan to use the description, you can leave this box empty. ADDING PICTURES • Alignment determines where a picture appears relative to its text. If you choose None, the picture stands on its own, wherever you inserted it. Paragraphs may appear before it or after it, but the post content won’t flow on either side of the picture. If you choose Left or Right, WordPress puts the picture on one side of the page and lets text flow around the other side (see Figure 6-9). TIP If your text narrates your pictures, you probably want to choose None for the alignment so you can position the pictures exactly where you want them. Examples include food blogs with pictures of meals, travelogues with pictures of tourist sites, and home renovation stories with a photo journal of the step-by-step process. On the other hand, if you have a rich layout that’s more like a glossy magazine, you might decide to use Left or Right for your picture alignment. • Link To is the web address where WordPress sends visitors if they click your pic. Usually, this setting is set to Media File and if someone clicks your picture, the browser displays the full-size picture file without any headers, sidebars, captions, or extra content. Alternatively, you can choose Attachment Page, which tells WordPress to take readers to something called, sensibly enough, an attachment page, which features the full-sized version of your picture and a section for reader comments. Or you can send readers to a web address—select Custom URL from the Link To menu and then type in the address you want. Finally, you can tell WordPress to not make the picture clickable at all (select None). • Size tells WordPress how big the picture should be in your post. You can choose Full Size to use the original dimensions of the uploaded file, or you can use one of the scaled-down versions of your picture, which WordPress creates automatically when you upload a file. You’ll notice that WordPress maintains the relative proportions of your picture—it never squashes a picture more width-wise than it does height-wise. (Remember that readers can click a scaled-down picture to see the full-size image, unless you set the Link To setting to Custom URL or None.) NOTE In addition to storing the original file you upload, WordPress creates three extra versions of every picture: a 150 × 150 pixel thumbnail, a 300 × 300 medium-size image, and a 1024 × 1024 large-size pic. You can change these defaults in the Settings→Media section of the dashboard, under the “Image sizes” heading. However, the changes affect only new pictures, not the ones you’ve already uploaded. Chapter 6: Jazzing Up Your Posts 183 ADDING PICTURES FIGURE 6-9 This theme aligns images on the left, which means the text in the post flows down the right side of the image. 5. Optionally, you can edit your picture by clicking the Edit Image link, which appears just above all the text boxes. Click Save when you finish. When you edit a picture, WordPress opens the Edit Image box (Figure 6-10). There, you can make a few simple changes. Most usefully, you can crop your picture. To do that, drag a rectangle around the region you want to keep and then click the Crop button, which appears in the small strip of buttons above your picture. This is the most common type of picture edit. You can also scale your picture down, reducing its size. To do so, type in either a new width or a new height in the Scale Image section on the right, using pixels as the unit of measure. WordPress adjusts the other dimension proportionally, ensuring that you don’t distort the picture. Then click Scale to apply the change. Finally, you can also flip or rotate your picture by clicking the corresponding button above the picture. 184 WORDPRESS: THE MISSING MANUAL ADDING PICTURES FIGURE 6-10 As you drag your mouse over a portion of your picture, the Image Crop section (right) shows the exact size (in pixels) of your selection. NOTE When you edit a picture, WordPress actually creates a new file. If you look at the picture’s URL, you’ll notice that WordPress appends a number to the end of the filename, so dead_elvis_tattoo.jpg becomes dead_elvis_tattoo1339626522667.jpg, for example. There are two reasons for this sleight of hand. First, it prevents problems if one of your posts needs to use the original version of the picture. Second, it lets you get your original picture back later if you ever need it. To do that, edit the image, and then click Restore Original Image. 6. Click the “Insert into post” button in the Insert Media window to add the picture to your post. When you insert a picture, you’ll see it in the visual editor. If you chose left or right alignment, you can type your text around the side of the picture. If you chose None or Center for the alignment, you can type text only above and below the image. To tweak your picture, first click it to select it. Two small icons appear in the picture’s top-left corner. Click the “X” icon to remove the picture from your post. Click the pencil icon to open an Image Details box that lets you alter the picture (using all the same tools available when you first insert a picture). Chapter 6: Jazzing Up Your Posts 185 ADDING PICTURES NOTE If you delete a picture from your post, it still exists on your WordPress site. This might be what you want (for example, it lets you use the picture in another post), or it might be a problem (if you’re worrying about someone stumbling across an embarrassing incident you made the mistake of photographing). To wipe a picture off your site, you need to use the media library, as described in the next section. GEM IN THE ROUGH Attaching Other Files to Your Post Pictures aren’t the only type of file you can put in a post. WordPress.com lets you embed a number of other types of document, including PDFs, Word documents, Excel spreadsheets, and PowerPoint presentations. In a self-hosted site, you face no restrictions, so you can upload any type of file you want. The difference is what happens after you upload the file. Unlike a picture, you won’t see the content from other types of documents in your post. Instead, WordPress adds an ordinary link that points to the uploaded file. If a reader clicks the link, the browser may display the document or offer to download it—what it does depends on whether the browser has an add-in that can display that type of file. For example, many browsers have add-ins that display PDF documents. Viewing the Media Library When you upload a picture, WordPress stores it in the wp-content/uploads folder of your site. For example, if you upload a picture named face_photo.jpg to the Magic Tea House site in January 2014, WordPress stores it at http://magicteahouse.net/ wp-content/uploads/2014/01/face_photo.jpg. Behind the scenes, WordPress also creates large, medium, and thumbnail-sized copies of your picture with names like face_photo_300x200.jpg, and stores them in the same folder. That way, WordPress doesn't waste bandwidth sending a full-sized picture if a post needs to display just a tiny thumbnail. WordPress might store more files than you think. In addition to all the pictures you insert into posts, all the featured images you use, and any custom header or background images you add to your theme, WordPress stores files that you attach to your posts here, too, like PDFs, Word documents, and spreadsheets. Furthermore, if you change a picture (using the basic cropping, resizing, and rotating tools described on page 184), WordPress stores a new, separate version of the picture as well. WordPress calls this repository, which holds your pictures and files, the media library. To see the current contents of your site’s media library, choose Media→Library (Figure 6-11). There are two reasons you might want to use the media library: to remove files you don’t need anymore, and to upload files you want to use in the future. 186 WORDPRESS: THE MISSING MANUAL Deleting Pictures from the Media Library You might choose to delete a media file as part of your basic website housekeeping. After all, why keep a file you’re not using, especially if it’s distracting you from the files you really do want? ADDING PICTURES To delete a media file, point to its filename and then click the Delete Permanently link that appears underneath. FIGURE 6-11 WordPress’s media library lists all the files you’ve uploaded. The “Uploaded to” column indicates whether you used a file in a post (and, if you have, which post features it). For example, the owner of this site used the first picture in this list (strawberry_tart.jpg) in the post “Dinner at Crème fraîche.” If you delete a picture that other posts are using, you have a small problem. Now when someone reads the post, they’ll see the broken-picture-link icon, the universal browser sign that something is missing. Correcting this problem is easy (just edit the post to delete the picture box), but it’s up to you to find the post. NOTE WordPress doesn’t let you replace a picture that’s in the media library. Even if you upload a picture that has the same name as one already in your library, WordPress puts it in a different subfolder or gives it a slightly different filename. The same thing happens if you edit a picture that’s already in the media library. This system prevents a number of seriously frustrating problems, but it also means that there’s no way to update the picture in a post without editing the post. Chapter 6: Jazzing Up Your Posts 187 ADDING PICTURES Adding Pictures to the Media Library You might choose to add an image to your library to prepare for future posts. Maybe you have a batch of pictures that detail a home renovation project, and you plan to write about the process on your blog, “Home Sweet Home.” However, you don’t want to start writing those posts yet. To make sure the pictures are ready when you need them, you can upload them straight to the media library, and then use them later. Here’s what to do: 1. Choose MediaÆAdd New. This takes you to the Upload New Media page, which is strikingly similar to the Insert Media window you used earlier. 2. Add your files. You upload media files by dragging them onto the “Drop files here” box or by clicking the Select Files button. 3. Optionally, fill in the information for each picture. Fill in the picture details (like the title and caption) and edit the image (say, cropping it or flipping it). When you actually insert the image into a post, you still have the chance to enter new information or re-edit the picture. But if you get some of the preliminary details down when you upload the picture, you’ll save some time when you insert it. GEM IN THE ROUGH Using the Media Library to Put a Picture in Your Sidebar As you already know, the media library stores all the pictures you use in your posts. You can also use it to store files you want to use in some other way. For example, you can link to one of your media files from an ordinary web page on a traditional, non-WordPress website. All you need to do is take note of the file’s URL. (To get that, choose Media→Library to visit the media library, and then click the file you’re interested in. WordPress displays the file’s location in the File URL text box.) You can use the same trick to inject an image into the Text widget (page 166), that all-purpose tool for showing scraps of content outside your posts. As you learned in Chapter 5, the Text widget accepts almost any HTML you can throw at it. So if you know you have a picture in the media file with the URL http://magicteahouse.net/wp-content/uploads/2014/06/ dead_elvis_tattoo.jpg , you can stick in an tag like this: 188