高级自定义字段 - 添加Linkedin

时间:2015-06-29 16:43:27

标签: php html wordpress wordpress-plugin custom-fields

我无法通过Advanced Custom Fields插件在WordPress中创建可点击的Linkedin链接。当我想添加电话号码和电子邮件时,这很简单。但我无法弄清楚如何为每个用户显示一个Linkedin图标作为可点击链接。

代码: function member_contact(){

$vcard = get_field('vcard');
$bio   = get_field('bio_pdf');
$linkedin = get_field('linkedin');
$phone = get_field('phone');
$fax   = get_field('fax');
$email = get_field('email');

$post_info = '';

if (isset($vcard['url'])) {
    $img = get_stylesheet_directory_uri() . "/images/mail-icon.png";
    $post_info .= '<a class="vcard" href="'.$vcard['url'].'"><img src="'.$img.'" /> Download Contact</a>';
}

if (isset($bio['url']) && isset($vcard['url'])) {
    $post_info .= ' | ';
}

if (isset($bio['url'])) {
    $post_info .= '<a class="bio-pdf" href="'.$bio['url'].'">Download Bio</a>';
}

if (isset($linkedin['url']) && isset($vcard['url']) || isset($bio['url'])) {
    $post_info .= ' | ';
}

if (isset($linkedin['url'])) {
    $post_info .= '<a href="'.$linkedin['url'].'"><i class="fa fa-linkedin" style="color:blue"></i> Linkedin</a>';
}


$post_info .= '<ul class="member-contact">';
$post_info .= "<li>$email</li>";
$post_info .= "<li>p: $phone</li>";
$post_info .= "<li>f: $fax</li>";
$post_info .= "</ul>";
var_dump($linkedin);

来自用户回购(Kevinlearynet)的代码,我不知道如何整合

                <?php if ( $linkedin = get_field('team_linkedin') ): ?>
                <a href="<?php echo $linkedin; ?>"><i class="icon-linkedin"></i></a>
                <?php endif; ?>

转储$ linkedin

string(21) "https://www.yahoo.com"

图片: enter image description here

2 个答案:

答案 0 :(得分:2)

您可以像这样编辑代码以集成linkedin链接。

function member_contact() {

        $vcard = get_field('vcard');
        $bio   = get_field('bio_pdf');
        $phone = get_field('phone');
        $fax   = get_field('fax');
        $linkedin = get_field('linkedin');
        $email = get_field('email');

        $post_info = '';

        if (isset($vcard['url'])) {
            $img = get_stylesheet_directory_uri() . "/images/mail-icon.png";
            $post_info .= '<a class="vcard" href="'.$vcard['url'].'"><img src="'.$img.'" /> Download Contact</a>';
        }

        if (isset($bio['url']) && isset($vcard['url'])) {
            $post_info .= ' | ';
        }

        if (isset($bio['url'])) {
            $post_info .= '<a class="bio-pdf" href="'.$bio['url'].'">Download Bio</a>';
        }

        $post_info .= '<ul class="member-contact">';
        $post_info .= "<li>$email</li>";
        $post_info .= "<li>p: $phone</li>";
        $post_info .= '<a href="$linkedin"><i class="icon-linkedin"></i></a>';
        $post_info .= "<li>f: $fax</li>";
        $post_info .= "</ul>";

        genesis_markup( array(
            'html5' => sprintf( '<div class="entry-meta">%s</div>', $post_info ),
            'xhtml' => sprintf( '<div class="post-info">%s</div>', $post_info ),
        ) );

    }

答案 1 :(得分:1)

您已经将LinkedIn字段分配给变量,因此您只需要立即构建链接:

function member_contact(){

$vcard = get_field('vcard');
$bio   = get_field('bio_pdf');
$phone = get_field('phone');
$fax   = get_field('fax');
$linkedin = get_field('linkedin');
$email = get_field('email');

$post_info = '';

if (isset($vcard['url'])) {
    $img = get_stylesheet_directory_uri() . "/images/mail-icon.png";
    $post_info .= '<a class="vcard" href="'.$vcard['url'].'"><img src="'.$img.'" /> Download Contact</a>';
}

if (isset($bio['url']) && isset($vcard['url'])) {
    $post_info .= ' | ';
}

if (isset($bio['url'])) {
    $post_info .= '<a class="bio-pdf" href="'.$bio['url'].'">Download Bio</a>';
}

$post_info .= '<ul class="member-contact">';
$post_info .= "<li>$email</li>";
$post_info .= "<li>p: $phone</li>";
$post_info .= "<li>f: $fax</li>";
//NEW LINE ADDED BELOW
$post_info .= "<li><a href="'.$linkedin.'" class="linkedInButton"></a></li>";
//NEW LINE ADDED ABOVE
$post_info .= "</ul>";

genesis_markup( array(
    'html5' => sprintf( '<div class="entry-meta">%s</div>', $post_info ),
    'xhtml' => sprintf( '<div class="post-info">%s</div>', $post_info ),
) );

}

这将在此功能中的传真号码后立即输出您的LinkedIn链接。

然后您只需要使用“linkedInButton”类设置样式以将LinkedIn图标作为背景图像,设置图标的高度和宽度,将其显示更改为块或内联块(根据需要) ,你将全力以赴。

作为一个FYI,高级自定义字段有一个我建议使用的URL字段而不是文本字段。这样做包含一些验证,以确保使用有效的URL。