目次
カード型のwordpress記事埋め込み機能をoEmbedというらしい。
こういうやつ↓↓
あわせて読みたい
【wordpress】非公開でも一覧に記事名だけは出したい
ページ内アンカーリンク＋記事一覧スタイルの場合 <?php $args = array( 'posts_per_page' => -1, 'post_type' => 'recruit_post', //postは通常の投稿機能 'p...
このテンプレートを変更したいが、/wp-includes内にあり触るわけにもいかない……というかwordpress更新するたびに変わってしまう。
と思ったら、テーマ内にembed.phpを置くだけでさくっとhtml構造変更可能でした！！
とりあえず、基本のembed.phpはコチラ※ちょっと古いwordpress（4.9.2くらい）ベースですが……。
embed.php
<?php
if (!headers_sent()) {
header('X-WP-embed: true');
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<title><?php echo wp_get_document_title(); ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php
do_action('embed_head');
?>
</head>
<body <?php body_class(); ?>>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class('wp-embed'); ?>>
<?php
$thumbnail_id = 0;
if (has_post_thumbnail()) {
$thumbnail_id = get_post_thumbnail_id();
}
if ('attachment' === get_post_type() && wp_attachment_is_image()) {
$thumbnail_id = get_the_ID();
}
if ($thumbnail_id) {
$aspect_ratio = 1;
$measurements = array(1, 1);
$image_size = 'full'; // Fallback.
$meta = wp_get_attachment_metadata($thumbnail_id);
if (!empty($meta['sizes'])) {
foreach ($meta['sizes'] as $size => $data) {
if ($data['width'] / $data['height'] > $aspect_ratio) {
$aspect_ratio = $data['width'] / $data['height'];
$measurements = array($data['width'], $data['height']);
$image_size = $size;
}
}
}
$image_size = apply_filters('embed_thumbnail_image_size', $image_size, $thumbnail_id);
$shape = $measurements[0] / $measurements[1] >= 1.75 ? 'rectangular' : 'square';
$shape = apply_filters('embed_thumbnail_image_shape', $shape, $thumbnail_id);
}
if ($thumbnail_id && 'rectangular' === $shape) :
?>
<div class="wp-embed-featured-image rectangular">
<a href="<?php the_permalink(); ?>" target="_top">
<?php echo wp_get_attachment_image($thumbnail_id, $image_size); ?>
</a>
</div>
<?php endif; ?>
<p class="wp-embed-heading">
<a href="<?php the_permalink(); ?>" target="_top">
<?php the_title(); ?>
</a>
</p>
<?php if ($thumbnail_id && 'square' === $shape) : ?>
<div class="wp-embed-featured-image square">
<a href="<?php the_permalink(); ?>" target="_top">
<?php echo wp_get_attachment_image($thumbnail_id, $image_size); ?>
</a>
</div>
<?php endif; ?>
<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>
<?php
do_action('embed_content');
?>
<div class="wp-embed-footer">
<?php the_embed_site_title() ?>
<div class="wp-embed-meta">
<?php do_action( 'embed_content_meta');
?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div class="wp-embed">
<p class="wp-embed-heading"><?php _e('Oops! That embed can’t be found.'); ?></p>
<div class="wp-embed-excerpt">
<p>
<?php
printf(
/* translators: %s: a link to the embedded site */
__('It looks like nothing was found at this location. Maybe try visiting %s directly?'), '<strong><a href="' . esc_url(home_url()) . '">' . esc_html(get_bloginfo('name')) . '</a></strong>'
);
?>
</p>
</div>
<?php
/** This filter is documented in wp-includes/theme-compat/embed-content.php */
do_action('embed_content');
?>
<div class="wp-embed-footer">
<?php the_embed_site_title() ?>
</div>
</div>
<?php endif; ?>
<?php
do_action('embed_footer');
?>
</body>
</html>
cssは…？と思うかもしれないですが、こちらはfunctions.phpに記述でOK
function.php
function my_embed_styles() {
wp_enqueue_style( 'wp-oembed-embed', get_template_directory_uri() . '/css/oembed.css' );
}
add_action( 'embed_head', 'my_embed_styles' );
コメント