web-dev-qa-db-ja.com

最近の投稿をカスタマイズする

私は私の最初のワードプレスのブログに取り組んでいて、本当にプラグインを持っている必要がないものの多くのために可能な限りプラグインを避けようとしています。私はphpに少し慣れています（私はそれを理解していませんが、どこにそれを置くべきか、そしてどのファイルがどこに行くべきか知っています）。私はCSSとHTMLの周りのテーマファイルを変更する方法を理解しています。それで、もし私がいくらかの練習と時間でそれをすることができるなら、私はむしろそれを手でコード化したがっているならプラグインを使います。

私は自分のホームページのサイドバーの最近の投稿にスタ​​イルを付けようとしていますが、それほど難しいとは思っていませんが、最近の投稿に画像を追加する方法がわかりません。各投稿に画像があり、最初の画像の小さなサムネイル表示を自分のホームページの[最近のブログ]領域に表示しようとしています。

enter image description here

私のデザインのように、ここに。

誰かが私がやろうとしていることのために働くだろうコードのメソッドやスニペットを持っていますか？

@トム：これは私のコードはあなたの提案を配置した後のように見えるものです

<aside id="archives" class="widget">
<h1 class="widget-title"><?php _e( 'Recent Blogs', 'toolbox' ); ?></h1>
<div class="thumbnail">
        <?php
        if(has_post_thumbnail()) {
            the_post_thumbnail();
        } else {
            // show a default image if no featured image is specified
            echo '<img src="'.get_bloginfo("template_url").'http://ambergoodwin.com/averylawoffice/img/SIDEBAR-recentblogimg.jpg" />';
        }
        ?>
    </div>
    <?php
        $args = array( 'numberposts' => '3' );
        $recent_posts = wp_get_recent_posts( $args );
            foreach( $recent_posts as $recent ){
        echo '<h5><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' .   $recent["post_title"].'</a> </h5> ';
     }
    ?>
</aside>

デフォルトの画像を指すようにしましたが、表示されないこともあります。私のイメージはスタイル化されています

.thumbnail { width: 50px; height: 50px; border: 1px solid #093; padding: 5px;}

そして、これが サイトです。あなたは私のサイドバーの問題を見つけることができます

だから私は私が間違っているのかわからない..

csssidebarrecent-posts
2
kia4567

あなたのポストループの内側：

<div class="recent-post">
    <div class="thumbnail">
        <?php
        if(has_post_thumbnail()) {
            the_post_thumbnail();
        } else {
            // show a default image if no featured image is specified
            echo '<img src="'.get_bloginfo("template_url").'/images/img-default.png" />';
        }
        ?>
    </div>
    <div class="title">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </div>
</div>

サムネイルのdivを左にフロートさせ、タイトルのdivに適切なマージン/パディングを与えて、それらが重ならないようにし、最近の投稿のクラスに明確な修正を適用し、それからスタイルに合わせます。

3
Tom J Nowell

最後に、Advanced Recent Postsプラグインをダウンロードしました。助けてくれてありがとう。

1
kia4567