รูปภาพสำหรับการนำทางถัดไป/ก่อนหน้าสำหรับบล็อก

ฉันกำลังพยายามรับลิงก์ถัดไป/ก่อนหน้าที่ด้านล่างของบล็อกเพื่อให้แสดงเฉพาะรูปภาพ ฉันมีการวางตำแหน่งและลิงก์ที่ตั้งค่าอย่างถูกต้องกับรูปภาพที่ฉันต้องการใช้เช่นกัน ปัญหาคือว่าลิงก์ใช้งานได้เฉพาะกับข้อความที่ฉันใช้จากโค้ดต้นฉบับเท่านั้น ฉันมีภาพที่ฉันต้องการใช้ตั้งค่าเป็นพื้นหลังของ div ฉันไม่สามารถทราบวิธีทำให้รูปภาพเป็นลิงก์และลบข้อความได้

ลิงก์ไปยังบล็อก:

http://www.conutant.org/test-box/

มีอะไรอยู่ใน PHP ของฉัน:

<div id="bottomnavigation">
    <?php if($single) { ?>
        <div class="nextprev">
            <span class="prev"><?php previous_post('&lsaquo;&lsaquo;&lsaquo; %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?></span>

            <a href="http://www.conutant.org"><div id="homeicon"></div></a>

            <span class="next"><?php next_post('% &rsaquo;&rsaquo;&rsaquo;', 'NEXT TUTORIAL', 'no', 'no'); ?></span>
        </div>
    <?php } ?>
</div>

และซีเอสเอส

.nextprev {
    height: 100px;
}

.nextprev .prev {
    float: left;
    height: 100px;
    width:200px;
    background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: 19px;
}

.nextprev .next {
     float: right;
     height: 100px;
     width:186px;
     background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
     background-repeat: no-repeat;
     background-position: left top;
}

navigation wordpress css
person Dustin Myers    schedule 12.12.2012    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

ลองด้วย:

<div id="bottomnavigation">

<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><img src="http://www.conutant.org/wp-content/uploads/2012/12/Prev.png" alt="<?php previous_post('&lsaquo;&lsaquo;&lsaquo; %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?>" /></span>
<a href="http://www.conutant.org"><div id="homeicon"></div></a>
<span class="next"><img src="http://www.conutant.org/wp-content/uploads/2012/12/next.png" alt="<?php next_post('% &rsaquo;&rsaquo;&rsaquo;', 'NEXT TUTORIAL', 'no', 'no'); ?>"</span>
</div>
<?php } ?>


</div>

คุณไม่จำเป็นต้องมีพื้นหลังใน css ของคุณอีกต่อไป

person billyJoe    schedule 12.12.2012

arrow_upward
1
arrow_downward

ใช้ภาพพื้นหลังกับจุดยึด ไม่ใช่กับช่วง

.prev a {
 float: left;
 background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
}

.next a {
 float: right;
 background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
}

คุณต้องตั้งค่าจุดยึดเป็นองค์ประกอบบล็อกด้วย:

.prev a,
.next a {
 display:block;
}

และสุดท้ายใช้ text-indent: -9999px เพื่อซ่อนข้อความ

person Simone    schedule 12.12.2012