web-dev-qa-db-ja.com

CSSクラスをprevious_post_linkに追加する、または前/次の投稿リンクURLを取得する方法

CSSクラスをprevious_post_link出力に追加するか、単にURLを取得して自分でHTMLマークアップを作成するにはどうすればよいですか。

paginationnavigation
5
Jiew Meng

previous_/next_post_link();の「下」にある、よりネイティブな関数を使うことができます。

# get_adjacent_post( $in_same_cat = false, $excluded_categories = '', $previous = true )
$next_post_obj  = get_adjacent_post( '', '', false );
$next_post_ID   = isset( $next_post_obj->ID ) ? $next_post_obj->ID : '';
$next_post_link     = get_permalink( $next_post_ID );
$next_post_title    = '»'; // equals "»"
?>
<a href="<?php echo $next_post_link; ?>" rel="next" class="pagination pagination-link pagination-next">
    <?php echo $next_post_title; ?>
</a>
7
kaiser

Previous_posts_link_attributesおよびnext_posts_link_attributesとは異なる動作をする、previous_post_linkおよびnext_post_link関数用のフィルターがあります。これがワードプレスWebサイトに記載されていない理由はわかりません。

function posts_link_next_class($format){
     $format = str_replace('href=', 'class="next clean-gray" href=', $format);
     return $format;
}
add_filter('next_post_link', 'posts_link_next_class');

function posts_link_prev_class($format) {
     $format = str_replace('href=', 'class="prev clean-gray" href=', $format);
     return $format;
}
add_filter('previous_post_link', 'posts_link_prev_class');
15
Yazeed Al Oyoun

関数呼び出しの周囲に要素を置き、そのようにスタイルを設定することができます。このような：

<div class="previous_post_link"><?php previous_post_link('%link'); ?></div>

その後、CSSのリンクを制御します。

.previous_post_link a { some styles here }
6
Digitalchild

ちょっと加えて、以下のフックに関する問題はそれらが複数形であるということです、そして、あなたの質問は「あなたが単数形にそれらをスタイルしたい」を意味します。

posts_link_attributes() {
    return 'class="styled-button"';
}

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

それらは完全に動作しますが、これらは投稿リストの下部に表示されるリンクであり、個々の投稿の下部にあるものではありません。 Logicは、このコードを単数形（ "next_post_link"と "previous_post_link"）で複製することができるはずで、それがうまくいくと言っています。残念ながらそうではありません。

単数形の次のリンクと前のリンクに対するフィルタの適用方法が異なるため、 こちらを参照

以下のコードは、単数形リンクでも機能するはずです。あなたのfunction.phpファイルに入れてください。

function post_link_attributes($output) {
    $code = 'class="styled-button"';
    return str_replace('<a href=', '<a '.$code.' href=', $output);
}

add_filter('next_post_link', 'post_link_attributes');
add_filter('previous_post_link', 'post_link_attributes');

上記のコードはテスト済みで動作します。ただし、function.phpを使用せずにこれを回避するには、各リンクの周りにLIをクラス化します。

    <!--BEGIN: Page Nav-->
    <?php if ( $wp_query->max_num_pages > 1 ) : // if there's more than one page turn on pagination ?>

        <nav id="page-nav">
            <h1 class="hide">Page Navigation</h1>
            <ul class="clear-fix">
                <li class="prev-link"><?php next_posts_link('« Previous Page') ?></li>
                <li class="next-link"><?php previous_posts_link('Next Page »') ?></li>
            </ul>
        </nav>

    <?php endif; ?>
    <!--END: Page Nav-->

このコードはテストされておらず、複数形に気付いています。

1
Lawrence Oputa

次の方法を試してみてください - 

<?php $prv_post = get_previous_post();
$next_post = get_next_post(); 
?>
<?php if(!empty($prv_post)) { ?>
<a href="<?php echo get_permalink($prv_post->ID ); ?>" class="prev" rel="prev">
<span class="meta-nav"><?php _e('Previous Post', 'awe') ?></span>
<span class="nav-icon"><i class="fa fa-angle-double-left"></i></span>
<?php echo get_the_title($prv_post->ID ); ?> ...
</a>
<?php } ?>

<?php if(!empty($next_post)) { ?>
<a href="<?php echo get_permalink($next_post->ID ); ?>" class="next" rel="next">
<span class="meta-nav"><?php _e('Next Post', 'awe') ?></span>
<span class="nav-icon"><i class="fa fa-angle-double-right"></i></span>
<?php echo get_the_title($next_post->ID ); ?> ...
</a>
<?php } ?>
0
Jahirul Islam Mamun

私が見つけた最も簡単な方法は、リンクをラップするfunctions.phpファイルにdivを追加することです。私の名前はclass = "plinks"です。

if ( ! function_exists( 'themename_post_nav' ) ) :
function themename_post_nav() {
global $post;
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
$next     = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous )
return;
?>
<nav>
<div class="plinks">
<?php next_post_link( '%link', _x( 'Previous', 'Pevious link', 'themename' ) ); ?>
<?php previous_post_link( '%link', _x( 'Next', 'Next link', 'themename' ) ); ?>
</div>
</nav>
<?php
}
endif;

それから、あなたのcssファイルにただ新しいクラスを書いてください。

.plinks a{
display:inline-block;
margin:1em 4px;
font-size:1em;
font-weight:500;
border:0;
padding:8px 1em;
color:#fff;
background:#000;
}
.plinks a:hover{
opacity:0.8;
}

を使用してあなたのテーマテンプレートページのいずれかにそれを呼び出します

<?php themename_post_nav(); ?>
0
Adrian