David, This is some excellent code for adding some microformats to @WordPress. Thanks @dshanske! https:/
For those with less technical expertise, could I pose a few questions which you may or may not cover in part 2?
If I recall, there's microformats version 1 and a more recent, updated microformats2. Most of what you're adding here is the mf2 spec and not backwards compatible mf1 mark up, right?
When you say that a theme shouldn't "style" hfeed or hentry, you mean that the CSS shouldn't include these classes as they're used only for semantic mark up and not meant to be used for CSS at all?
If hfeed is already added into a theme, do you recommend removing it from the theme code directly with search and replace (particularly if it wasn't added in the correct place) and then adding it with the snippet you provided, or is it best to leave it in the theme and remove it from the code? If we remove it from the code you provided, which line(s) should we omit? What happens if it is duplicated (ie, what will the output look like, or what happens to parsers that read the code)?
What exactly are the post, body and comment class functions? What do they look like and where would one find them in a particular theme?
How is the code you've provided different from what the WordPress plugin uf2 does? Is it more or less extensive?
In the end, this is also just a stop-gap measure to quickly add a small, but high level subset of microformats to current themes that don't support it? Ideally we would hope more modern themes will add a more full version of microformats natively?
Class entry-content div contains too much · Issue #470 · WordPress/twentysixteen https:/
It appears that the <div class="entry-content"> spans more content than it should. (I'm actually a bit surprised that a modern facing theme like TwentySixteen doesn't fully support [microformats 2](http:/
Specifically I think that the entry-content div should end before the following functionalities when they're included:
<div class="sharedaddy> (Jetpack's Share This functionality),
<div id="jp-relatedposts"> (Jetpack's related posts functionality)
<div class-"author-info"> (Gravatar author information)
Essentially the semantic class "entry-content" should only contain the content written in the body of a post by the user and shouldn't really include the additional information by these other plugins.
As an example, by having entry-content include these additional pieces, users, when syndicating content semantically to other services like Tumblr, Facebook, or even RSS readers, will include this additional (often unwanted content). See also:
https:/
https:/
Cross Reference: http:/
I'd put the issue into the <a href="https://github.com/pfefferle/wordpress-uf2/issues/15">log on GitHub for uf2</a> and got the following back from David Shanske which confirms my suspicion:
<blockquote>It is the fact that the theme styles hentry</blockquote>
hentry is a microformat and shouldn't be used as a theming class: http:/
+1 from me on this feature request. (It would be cool to see an awesome theme like this also support microformats v2 as well. Sempress is the only theme out there that does this already see: https:/
@raumzeit77 As a temporary fix for the IndieAuth piece, you could add a text widget to your site that helps you get compliance with some of the IndieWeb Specs. You can also repeat some of the social icons with "invisible" links so that they don't actually display on the page, but are machine readable for IndieWeb purposes. It's not the best fix/workaround as you'll need to remember that the "invisible" code is there at some later date, but it should get you over the hump. Keep in mind that not all providers work with IndieAuth, though platforms like Twitter and GitHub do.
Try putting the following into a text widget (some portions will be visible others, link tags for example, will not):
<pre><code>
<div class="h-card">
<link href="https://facebook.com/USERNAME" rel="me">
<link href="https://twitter.com/USERNAME" rel="me">
<link href="https://plus.google.com/+USERNAME1/posts" rel="me">
<link href="https://www.pinterest.com/USERNAME/" rel="me">
<link href="sms:+12125551212" rel="me">
<link href="mailto:me@emailaddress.com" rel="me">
<br/><br/>
<img rel="me" class="u-photo" src="http://domainname.com/site_icon.png" alt="" width="200" height="200" /><br/><br/>
email: <a class="u-email" href="mailto:me@emailaddress.com">me@emailaddress.com</a><br/>
phone:<span class="p-tel"><a rel="me" href="tel:+12125551212" >+12125551212</a></span><br/>
<p class="p-note">
<span class="p-job-title">President</span> and <span class="p-role">CEO</span> at <a class="p-org" href="http://domainname.com" target="blank" >Company Name</a>; <br/>
<span class="p-locality">ANYWHERE, NY </span><span class="p-country-name">United States</span></p>
</div>
</code></pre>
Some of the code will also qualify you for some additional levels within the IndieWeb identification space relating to h-card.
#IndieWeb
![]()
Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example,
tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.
Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!
You use the schema.org vocabulary along with the Microdata, RDFa, or JSON-LD formats to add information to your Web content. This guide will help get you up to speed with Microdata and schema.org so that you can start adding markup to your web pages.
Although this guide focusses on Microdata, most examples on the schema.org site show examples in RDFa and JSON-LD too. The basic ideas (types, properties etc.) introduced here are relevant beyond Microdata - take a look at the examples to see how the details compare. #indieweb #microformats