WordPress打造氣泡對話短代碼很新穎的小展現

時間 2019-11-17

標籤 wordpress 打造氣泡對話代碼新穎展現欄目 Wordpress 简体版

原文原文鏈接

WordPress打造氣泡對話短代碼，目前只作了左邊氣泡對話，個人理想實現是，左右對稱形式 php

目前演示 css

1	[ shuo ] WordPress打造氣泡對話短代碼 [ / shuo ]

小編最終效果： app

因爲時間很忙，作了一半先暫時拋開，有時間再完善剩下步驟…… 編輯器

打造短代碼的形式，短代碼屬性暫時只作了一種[img] 理想上，是但願嵌入編輯器按鈕，和經過郵箱，網址自行判斷用戶的頭像和連接…… wordpress

例如： url

1	[ shuo img = "顯示頭像的圖片地址" ] WordPress打造氣泡對話短代碼 [ / shuo ]


	WordPress小編剛剛學不久，大牛，小牛勿噴…… spa

複製到配置文件function.php 裏面 code

 
        function 
          
        myshuo 
        ( 
        $ 
        atts 
        , 
          
        $ 
        content 
          
        = 
          
        null 
        ) 
          
        { 
       
        extract 
        ( 
          
        shortcode_atts 
        ( 
          
        array 
        ( 
       
        'img' 
          
        = 
        > 
          
        'http://ds.cdncache.org/avatar-50/036/53271.jpg' 
        , 
       
        ) 
        , 
          
        $ 
        atts 
          
        ) 
          
        ) 
        ; 
       
        return 
          
        '<table class="reply_tab" border="0" cellspacing="0" cellpadding="0"> 
       
                          <tbody><tr> 
       
                            <td class="td1"></td> 
       
                            <td class="td2"></td> 
       
                            <td class="td3"></td> 
       
                            </tr> 
       
                          <tr> 
       
                            <td class="td4"></td> 
       
                            <td class="td5"><p>' 
        . 
        $ 
        content 
        . 
        '</p> 
       
                            </td> 
       
                            <td class="td6"></td> 
       
                           </tr> 
       
                          <tr> 
       
                            <td class="td7"> 
       
                                <div class="bvatar_wrapper reply_avatar"> 
       
                                     <img src="' 
        . 
        $ 
        img 
        . 
        '" class="bvatar"> 
       
                                </div> 
       
                            </td> 
       
                            <td class="td8"></td> 
       
                            <td class="td9"></td> 
       
                          </tr> 
       
                        </tbody></table><div style="clear:both"></div>' 
        ; 
       
        } 
       
        add_shortcode 
        ( 
        'shuo' 
        , 
          
        'myshuo' 
        ) 
        ;

還有就是樣式css的寫法（供參考使用） cdn

CSS

 
        .reply_tab 
        { 
          
        margin-bottom 
        : 
        -35px 
        ; 
        margin 
        : 
          
        5px 
        ; 
        } 
       
 
        .td1 
        { 
          
        width 
        : 
        103px 
        ; 
          
        height 
        : 
        14px 
        ; 
          
        font-size 
        : 
        10px 
        ; 
        background 
        : 
        url 
        ( 
        ../images/bubble.png 
        ) 
          
        80px 
          
        1px 
          
        no-repeat 
        } 
       
 
        .td2 
        { 
          
        height 
        : 
        14px 
        ; 
          
        font-size 
        : 
        10px 
        ; 
        background-image 
        : 
        url 
        ( 
        ../images/bubble.png 
        ) 
        ; 
          
        background-position 
        : 
        -20px 
          
        0px 
        ; 
        } 
       
 
        .td3 
        { 
          
        height 
        : 
        14px 
        ; 
          
        width 
        : 
        14px 
        ; 
        background-image 
        : 
        url 
        ( 
        ../images/bubble.png 
        ) 
        ; 
          
        background-position 
        : 
        -504px 
          
        0px 
        } 
       
 
        .td4 
        { 
          
        width 
        : 
        103px 
        ; 
          
        font-size 
        : 
        10px 
        ; 
          
        background 
        : 
        url 
        ( 
        ../images/bubble_mid.png 
        ) 
          
        87px 
          
        0px 
          
        repeat-y 
        } 
       
 
        .td5 
        { 
          
        background 
        : 
        url 
        ( 
        ../images/bubble_mid.png 
        ) 
          
        repeat-y 
          
        -14px 
          
        0px 
        ; 
          
        color 
        : 
        #555555 
        ; 
        *color 
        : 
        #666666 
        ; 
        line-height 
        : 
        25px 
        ; 
        word-break 
        : 
        break-all 
        ; 
        word-wrap 
        : 
          
        break-word 
        ; 
        } 
       
 
        table p 
        { 
          
        color 
        : 
        #555555 
        ; 
        *color 
        : 
        #666666 
        ; 
          
        margin 
        : 
        0 
        ; 
          
        padding 
        : 
        0 
        ; 
          
        line-height 
        : 
        25px 
        ; 
        max-width 
        : 
          
        450px 
        ; 
          
        } 
       
 
        .reply_list 
        { 
          
        width 
        : 
        580px 
        ; 
        } 
       
 
        .td6 
        { 
          
        height 
        : 
        14px 
        ; 
          
        width 
        : 
        14px 
        ; 
        background 
        : 
        url 
        ( 
        ../images/bubble_mid.png 
        ) 
          
        -498px 
          
        0px 
        ; 
          
        max-width 
        : 
        470px 
        ; 
        } 
       
 
        .td7 
        { 
          
        width 
        : 
        103px 
        ; 
          
        height 
        : 
        68px 
        ; 
          
        font-size 
        : 
        10px 
        ; 
        background 
        : 
        url 
        ( 
        ../images/bubble.png 
        ) 
          
        80px 
          
        -22px 
          
        no-repeat 
        ; 
          
        *padding-top 
        : 
        10px 
        } 
       
 
        .td8 
        { 
          
        height 
        : 
        14px 
        ; 
          
        font-size 
        : 
        12px 
        ; 
          
        background 
        : 
        url 
        ( 
        ../images/bubble.png 
        ) 
          
        -20px 
          
        -22px 
          
        no-repeat 
        } 
       
 
        .td9 
        { 
          
        height 
        : 
        14px 
        ; 
          
        width 
        : 
        14px 
        ; 
        background 
        : 
        url 
        ( 
        ../images/bubble.png 
        ) 
          
        -504px 
          
        -22px 
          
        no-repeat 
        } 
       
 
        .reply_avatar  
        { 
       
 
        margin-top 
        : 
          
        -35px 
        ; 
       
 
        margin-right 
        : 
          
        28px 
        ; 
       
 
        } 
       
 
        .bvatar_wrapper  
        { 
       
 
        width 
        : 
          
        71px 
        ; 
       
 
        height 
        : 
          
        68px 
        ; 
       
 
        margin-right 
        : 
          
        10px 
        ; 
       
 
        float 
        : 
          
        right 
        ; 
       

           
       
 
        } 
       
 
        .bvatar  
        { 
       
 
        margin-left 
        : 
          
        11px 
        ; 
       
 
        margin-top 
        : 
          
        11px 
        ; 
       
 
        float 
        : 
          
        left 
        ; 
       
 
        width 
        : 
          
        50px 
        ; 
       
 
        height 
        : 
          
        50px 
        ; 
       
 
        border-radius 
        : 
          
        30px 
        ; 
       
 
        box-shadow 
        : 
          
        0 
          
        1px 
          
        4px 
          
        rgba 
        ( 
        0,0,0,.3 
        ) 
        ; 
       
 
        } 
       