开发者

Image above the title : Wordpress

I am trying to display the image (with class coreimg) above the title on wordpress (home page and single)

coreimg size : fixed (eg: 680 x 240)

I know I can do some css trick by relatively aligning them but I want a more sophisticated method. I also tried get_first_image() method by westondeboer. But the negetive point is -

  • Can't fetch a specific image (with class coreimg), It has to be the first one.
  • Its difficult to insert image's own alt or title.

So what I'm trying to do is create a wp shortcode , which would be something like :

[coreimg src="http://example.org/wp-content/uploads/2010/06/fly.jpg" title="The flying kite"]

or even the below code would be fine :

<img src="http://example.org/wp-content/uploads/2010/06/fly.jpg" title="The flying kite" alt="The 开发者_运维技巧flying kite" class="coreimg"/>

Update: The problem is just fetching the image through php. And I'm unable to do it, So I started over and hoping for a kick start for the code.

Update2:

Current code in single.php

<h1 class="entry-title"><?php the_title();?></h1><?php the_content(); ?>

New Code (should be like):

<img src="<?php get_coreimg_url(); ?>" title="<?php get_coreimg_title(); ?>" alt="<?php get_coreimg_title(); ?>" class="headcoreimg"/>  
<h1 class="entry-title"><?php the_title();?></h1><?php the_content(); ?>

Now Here I want get_coreimg_url()'s and get_coreimg_title()'s code for functions.php


You can modify the code from get_first_image() to look for a tag with that class, instead of just the first image. You'll have to change the regex to look for class="coreimg" or something.


Finally got the solution. (:
Thanks everybody for helping..

So basically all you need to do is remove the default <h1 class="entry-title"><?php the_title();?></h1> from your single.php and/or index.php (for default themes)

Add the below function in functions.php:

function coreimg($atts) {
   // Just add the below shortcode in the post.
   // [cover src='http://localhost/wordpress/wp-content/uploads/2010/06/flyingkite.jpg' title='A flying Kite']
   global $post;
   extract(shortcode_atts(array('src' => '', 'title' => '' ), $atts));
   if($src == '') {
    $src = get_bloginfo('template_directory') . '/rotate.php';
   }
   if ($title == '') {
    $title = "{$post->post_title}";
   }
   $coverup = '<a href="';
   $coverup .= get_permalink($post->ID);
   $coverup .= '" ' . "alt='{$title}' title='{$title}' class='corecover'><img src='";
   $coverup .= "{$src}' class='cocover' alt='{$title}' title='{$title}' /></a>";
   $before = '<h1 class="entry-title"><a href="' . get_permalink($post->ID) .'" title="' . "{$post->post_title}\">";
   $after = '</a></h1>';
   $output = "{$coverup}{$before}{$post->post_title}{$after}";

   return $output;
}
add_shortcode('cover', 'coreimg');

You can grab the random.php file from alistapart.

What does it do (special)?

If by default you haven't specified any specific image for the post it rotates random header images that you can upload in a folder (and specify in random.php) . The shortcode for this might seem like [cover title="The flying kite"] or just [cover]. for complete url shortcode you can type in [cover src="../mykite.png"] or [cover src="../mykite.png" title="Hey, look a kite!"]

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜