Without plugins！How to display a blog card with internal and external link support.｜WordPress

Learn how to display blog cards in WordPress without using a plugin.

Plug-in non-use has various advantages, such as reducing server load and maintaining site display speed.

WordPress has a large variety of plugins, but you want to customise it without using as many as possible.

We would like to introduce an implementation method that we have also introduced on our website, in the hope that people of the same mind will find it useful.

Shortcode installation methods are available for internal and external links.

Completion image.

The following is a display image.

The design can be freely customised using CSS.

※If it does not appear, reload.

Internal link to a web page.

Frecer

Frecer：Creating a new world with free ideas.

🕒️2024-09-10

#Frecer #Freedom #Peace #Unite #ChallengeCreating a new world with free ideas.Crowd FundingIt operates a crowdfunding system to realise various projects.PlantThis is a return for the plant project.FigureCharacter figures from comics, special effects, etc.FashionNew and used fashion-related items for sale.SponsorWe are looking for sponsors who can help make Frecer a great place to work together.BlogSpecialist articles and members' life logs.

External links.

X (formerly Twitter)

x.com

https://x.com

Objective.

Internal linking-enabled blog cards.

In the case of internal linking, “increasing the click rate of links to related pages across the site to increase the overall PV” is one of the methods of internal SEO for your own site.

Blog cards with external link support.

1. Contribution of external links to send visitors to the site.
2. Gaining some benefit from sending customers to external sites.

The acquisition of links from pages with relevant content is an SEO benefit for the externally linked site, which may return some benefit to your own site.

Installation method.

The following steps are required for installation.

1. Introduction to OpenGraph.php.
2. Edit functions.php.
3. Editing CSS.
4. Insert blog card with shortcode.

Installation of OpenGraph.php.

OpenGraph.php is a PHP file that allows various information to be retrieved from OGP tags on external sites.

File Download.

Download the file from the following website.

GitHub

GitHub - scottmac/opengraph: Helper class for accessing the OpenGraph Protocol

https://github.com/scottmac/opengraph/

Helper class for accessing the OpenGraph Protocol. Contribute to scottmac/opengraph development by creating an account on GitHub.

Click on the ‘Code’ button and download the complete set of files from ‘Download ZIP’.

Extracting and installing files.

Unzip the Zip file and place ‘OpenGraph.php’ in the same directory where functions.php is located.

Edit functions.php.

Edit functions.php.

If a child theme is available, use the child theme’s functions.php.

The instructions for each code are given at the top of each code for reference.

※Always make a backup before editing.

/* Create shortcodes for external link-enabled blog cards. */
function show_Linkcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	//Specify the width of the image size.
	$img_width ="170";
	//Specify height of image size.
	$img_height = "170";
	
	//Get OGP information.
	require_once 'OpenGraph.php';
	$graph = OpenGraph::fetch($url);
	
	//Get the title from the OGP tag.
	$Link_title = $graph->title;
	if(!empty($title)){
		$Link_title = $title;//title=""If there is an input of the following, priority is given to that input.
	}
		
	//Get description from OGP tag (used as excerpt text).
	$Link_description = wp_trim_words($graph->description, 60, '…' );//Change the number of characters at will.
	if(!empty($excerpt)){
		$Link_description = $excerpt;//Manually when the value cannot be retrieved.excerpt=""Input.
	}
	
	//Get screenshots using wordpress.com API.
	$screenShot = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
	//Show screenshots.
	$xLink_img = '<img src="'. $screenShot .'" width="'. $img_width .'" />';
	
	//Favicon retrieval (scraping with Google's API).
	$host = parse_url($url)['host'];
	$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
	if($searchFavcon){
		$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
	}
		
	//Blog card HTML output for external links.
	$blog_card .='
	<div class="blogcard ex">
	<a href="'. $url .'" target="_blank" rel="noopener noreferrer">
	 <div class="blogcard_thumbnail">'. $xLink_img .'</div>
	 <div class="blogcard_content">
	  <div class="blogcard_title">'. $Link_title .'</div>
	  <div class="blogcard_excerpt">'. $Link_description .'</div>
	  <div class="blogcard_link">'. $favicon .' '. $url .' </div>
	 </div>
	 <div class="clear"></div>
	</a>
	</div>';	
	
	return $blog_card;	
}

//Add to shortcode.
add_shortcode("blog_card", "show_Linkcard");

CSS code settings.

Finally, CSS adjustments are made.

The CSS code is shown below.

Copy and paste the whole thing into any style sheet, such as style.css.

.blogcard {
  line-height: 1;
  background-color: #fff;
  word-wrap: break-word;
  margin: 10px 0
}

.blogcard.ex {
  background-color: #f5f5f5;
  border-radius: 5px
}

.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all .2s ease
}

.blogcard a:hover {
  opacity: .6
}

.blogcard_thumbnail {
  float: left;
  padding: 20px
}

.blogcard_title {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  padding: 17px 20px 10px
}

.blogcard_excerpt {
  font-size: .85em;
  line-height: 1.6;
  padding: 0 17px 15px 20px
}

.blogcard_link {
  font-size: .9em;
  padding: 0 17px 15px 20px;
  text-align: left
}

.blogcard_link .favicon {
  margin-bottom: -4px;
  width: 18px;
  height: 18px
}

The design can be changed to any desired design by customising the CSS.

CSS for smartphones.

CSS code to support smartphone display.

@media screen and (max-width:768px) {
  .blogcard {
    margin: 10px 0
  }
  .blogcard_thumbnail img {
    width: 90px
  }
  .blogcard_title {
    font-size: .95em;
    padding-bottom: 17px
  }
  .blogcard_excerpt {
    display: none
  }
}

When you have finished editing the CSS, save it to the CSS used by your theme.

This completes the set-up.

How to display your blog card.

Insert the following short code.

[blog_card url="Link to URL"]

For example, if you want to display the card ‘https://x.com/’, the shortcode would be as follows.

【Short code examples.】

[blog_card url="https://x.com/"]

【Representation example.】

X (formerly Twitter)

x.com

https://x.com

If the title or description of the external link cannot be obtained, or if you want to include individual wording, it is possible to manually enter “title” and “excerpt” in addition to “url” in the shortcode to display any text.

【Short code examples.】

[blog_card url="https://x.com/" title="Arbitrary title name." excerpt="Optional explanatory text."]

【Expression Example.】

X (formerly Twitter)

Arbitrary title name.

https://x.com

Optional explanatory text.

Conclusion.

In this article, we showed you how to display internal and external link-supported blog cards in WordPress without using a plugin.

The work itself does not take long and can be implemented quickly, so please refer to this if you like.

We are also planning to add conditional branching and introduce methods to reflect only certain article pages and not affect other page speeds, so we hope you will continue to subscribe to our newsletter.

Thank you for watching until the end.