/rashitamemo/Wordpressの埋め込みコンテンツのデザインを変更する

generated at 2/20/2025, 9:31:52 PM
Wordpressの埋め込みコンテンツのデザインを変更する


WordPress(ワードプレス)　URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法 │ 3oWebCreate WEB小ネタと生活ライフハック

テンプレートタグ/get the excerpt - WordPress Codex 日本語版

抜粋が二重に表示されるのと、文字の切り抜き範囲が大きすぎるのを変更。
embed-content.php<?php
/**
 * Contains the post embed content template part
 *
 * When a post is embedded in an iframe, this file is used to create the content template part
 * output if the active theme does not include an embed-content.php template.
 *
 * @package WordPress
 * @subpackage Theme_Compat
 * @since 4.5.0
 */
?>
<style>

a {
  text-decoration: none;
}

.wp-embed {
  padding: 3% 3% 1% 3%;
  line-height: 120%;
  font-size: 14px;
}


.wp-embed-featured-image {
    width: 40%;
    overflow: hidden;
    float: left;
    margin-bottom: 10px;
}

.wp-embed-heading {
	width: 60%;
	float: right;
}

.wp-embed-heading a{
  padding-left:20px;
	font-size: 120%;
  font-weight: bold ;
  color: #333 ;
  line-height: 120%;
	display: block;
}

.wp-embed-site-title {
  font-size: 80%;
  line-height: 120%;
  padding-right: 10px;
}

.wp-embed-footer {
	padding-top: 0px;
  margin-top: 0;
}

.wp-embed-excerpt {
  clear: both;
  padding-left:20px;
  padding-top: 10px;
  color: #333 ;
}

.wp-embed__sp{
  padding: 0;
  line-height: 120%;
  font-size: 12px;
  display: table;
  border: solid 1px #ccc;
}

.wp-embed__sp-box {
  padding: 0;
  line-height: 120%;
  font-size: 12px;
  display: table;

}

.wp-embed__sp-box img{
  width: 100%;
  height: auto;
  vertical-align: top;
}

.wp-embed__sp-featured-image {
    display: table-cell;
    width: 50%;
}

.wp-embed__sp-heading {
	display: table-cell;
  vertical-align: middle;
  font-weight: bold ;
  color: #333 ;
  width: 50%;
  line-height: 120%;
  padding:1% 1% 1% 2%;
}

.wp-embed__sp-heading span{
  display: block;
  margin-top: 5px;
  color: #ddd;
  font-size: 80%;
}

.wp-embed__sp .wp-embed-footer {
  display: block;
	padding: 3%;
}


</style>

<?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();
}

$thumbnail_id = apply_filters( 'embed_thumbnail_id', $thumbnail_id );

if ( $thumbnail_id ) {
  $aspect_ratio = 1;
  $measurements = array( 1, 1 );
  $image_size   = 'large'; // （'thumbnail', 'medium', 'large', 'full'）

  $meta = wp_get_attachment_metadata( $thumbnail_id );
  if ( ! empty( $meta['sizes'] ) ) {
    foreach ( $meta['sizes'] as $size => $data ) {
      if ( $data['height'] > 0 && $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 );
}

  $ua = $_SERVER['HTTP_USER_AGENT'];
  if (preg_match('/(iPhone|Android.*Mobile|Windows.*Phone)/', $ua)) {
    ?>
    <div class="wp-embed__sp">
    <a href="<?php the_permalink(); ?>" target="_top">
    <div class="wp-embed__sp-box">
      <?php
      if ( $thumbnail_id && 'rectangular' === $shape ) : ?>
        <div class="wp-embed__sp-featured-image">
            <?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>

        </div>
      <?php endif; ?>
      <div class="wp-embed__sp-heading">
          <?php the_title(); ?>
      </div>

      <?php if ( $thumbnail_id && 'square' === $shape ) : ?>
        <div class="wp-embed__sp-featured-image square">
            <?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
        </div>
      <?php endif; ?>
      <?php
      /**
       * Prints additional content after the embed excerpt.
       *
       * @since 4.4.0
       */
      do_action( 'embed_content' );
      ?>
    </div>
    </a>
    <div class="wp-embed-footer">
      <?php the_embed_site_title() ?>
    </div>

  </div>
    <?php
  }else {
    ?>
    <div <?php post_class( 'wp-embed' ); ?>>
      <?php
      if ( $thumbnail_id && 'rectangular' === $shape ) : ?>
        <div class="wp-embed-featured-image">
          <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-heading">
        <a href="<?php the_permalink(); ?>" target="_top">
          <?php the_title(); ?>
        </a>
            <div class="wp-embed-excerpt"><?php echo mb_substr(str_replace(array("\r\n", "\r", "\n"), '', strip_tags(get_the_excerpt())), 0, 110). '' ?></div>
      </div>

      <?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; ?>
      <?php
      /**
       * Prints additional content after the embed excerpt.
       *
       * @since 4.4.0
       */
      do_action( 'embed_content' );
      ?>

      <div class="wp-embed-footer">
        <?php the_embed_site_title() ?>

        <div class="wp-embed-meta">
          <?php
          /**
           * Prints additional meta content in the embed template.
           *
           * @since 4.4.0
           */
          do_action( 'embed_content_meta');
          ?>
        </div>
      </div>
    </div>

    <?php
  }
  ?>


#Wordpress