内部外部リンク対応プラグインなしブログカード作った！

こんにちは！サキナオコです^o^
雨がパラパラ降っています。

さて、ここのところプラグインなしの内部外部両対応ブログカード作成していました。いろいろなサイトを参考にしましたが、思うような形にならず…

やっとできた！と思ったら内部リンクしか対応しておらず、GitHubよりOpenGraph.phpというものをダウンロードしなければなりませんでした。

そのファイルをfunctions.phpと同じフォルダに入れ以下のコードを

	static private function _parse($HTML) {
		$old_libxml_error = libxml_use_internal_errors(true);
		//OpenGraph.phpに追加するコード
		$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");
//追加おわり
		$doc = new DOMDocument();
		$doc->loadHTML($HTML);

↑ちょっとずれて表示されてますけど(;’∀’)

83行目辺りに1行追記。

そしていろんなサイトからPHPファイルをコピペしたもののうまくいかず。

ChatGPTにしつこく聞いて、なんとかPHPファイルで理想の形はできましたが、本文抜粋が全然表示されません。

またもやしつこくChatGPTに聞いて試して、聞いて試してを繰り返し、はっと気づいたのはサイト自体にOGPが設定されていないのでは？？ということ。

OGPも自動的に設定できるプラグイン、例えばAll in One SEOとか入れていたらよかったんでしょうけどあんまりプラグイン入れたくないんです。

で、プラグイン使わずにphpファイルでサイトのOGPの設定をする方法をChatGPTに聞いて追加したところ、めでたく本文抜粋が表示されました！

ついでにキャプションもつけられるようにしました。

長かった。。以下がそのブログカードです！

なんかブログデザイン変えたくなり

こんにちは！サキナオコです^o^今日も良いお天気ですね！いやあ、なんだかプログラミング学習の記事を書いて、総合案内所(…

programming.sakinaoko.com

こちら内部カード。3日かかりました

JavaScriptの修行しています

こんにちは！サキナオコです^o^むしむしします。っていうかこちらお久しぶりです！最近はJavaScriptの修行してい…

illustration.sakinaoko.com

外部ブログカードもできた！こちらイラストブログです！

使用するにはショートコードブロックに以下を入力

[sc_Linkcard url="https://example.com" caption="ブログカードの下のキャプション"]

いちいち書くのが面倒なので、再利用可能なブロックに保存し、使用の際は3点マークから[解除]して編集。

最後にphpファイルとcssファイルを書いておきます！後の自分とお困りの方の参考になれば！もしうまくできたらぜひ「いいね」押してください！3日の苦労が報われると思います！後の自分が押すかも。

phpファイルの追加は慎重に！途中何度もエラーになり、よく見ると元の記載を気づかないうちに消去したりしていましたので。。><;;

よくわからないですがちょっとしたことで何か怖いことになるらしく、どうぞ慎重に。。

元々の記載の部分と?>の間に以下を挿入。ChatGPTのおかげで表示媒体に合うようになるメディアクエリ付きです！

// OGPタグを追加する関数
function add_og_tags() {
    if (is_single() || is_page()) { // 投稿またはページの場合のみ
        global $post;

        // タイトル
        $title = get_the_title($post->ID);
        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';

        // URL
        $url = get_permalink($post->ID);
        echo '<meta property="og:url" content="' . esc_url($url) . '" />';

        // 抜粋（説明）
        $description = get_the_excerpt($post->ID);
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';

        // サムネイル画像
        if (has_post_thumbnail($post->ID)) {
            $thumbnail_id = get_post_thumbnail_id($post->ID);
            $thumbnail_url = wp_get_attachment_image_url($thumbnail_id, 'full');
            echo '<meta property="og:image" content="' . esc_url($thumbnail_url) . '" />';
        } else {
            // サムネイルが設定されていない場合のデフォルト画像
            echo '<meta property="og:image" content="' . esc_url(get_template_directory_uri() . '/path/to/default-image.jpg') . '" />';
        }

        // その他のOGPタグを必要に応じて追加
        echo '<meta property="og:type" content="website" />'; // タイプを設定（例：website, articleなど）
    }
}
add_action('wp_head', 'add_og_tags');

//ここから２
// ブログカードのショートコードを作成 
function show_Linkcard($atts) {
    // ショートコードのデフォルトの引数を設定
    $default_atts = shortcode_atts(array(
        'url' => "",
        'title' => "",
        'excerpt' => "",
        'caption' => "", // キャプション属性を追加
    ), $atts);
  
    // $default_attsの値または空文字を変数に代入
    $url = !empty($default_atts['url']) ? $default_atts['url'] : '';
    $title = !empty($default_atts['title']) ? $default_atts['title'] : '';
    $excerpt = !empty($default_atts['excerpt']) ? $default_atts['excerpt'] : ''; // 手動で入力されたexcerpt
    $caption = !empty($default_atts['caption']) ? $default_atts['caption'] : ''; // キャプションを取得
  
    // 画像サイズの指定
    $img_width = "180";
    $img_height = "150";
  
    // OGP情報を取得
    require_once 'OpenGraph.php';
    $graph = OpenGraph::fetch($url);
  
    // OGPタグからタイトルを取得
    $Link_title = !empty($graph->title) ? $graph->title : 'タイトルなし';

    if (!empty($title)) {
        $Link_title = $title; // title=""の入力がある場合はそちらを優先
    }

    // 外部サイトのタイトルを取得（og:site_nameから）
    $site_name = !empty($graph->site_name) ? $graph->site_name : parse_url($url, PHP_URL_HOST);

    // OGPタグからdescriptionを取得（抜粋文として利用）
    $Link_description = !empty($graph->description) ? wp_trim_words($graph->description, 60, '…') : '';
    
    if (!empty($excerpt)) {
        $Link_description = $excerpt; // 手動でexcerpt=""を入力された場合は優先
    }

    // OGPタグからサムネイル画像を取得
    $thumbnail = !empty($graph->image) ? $graph->image : '';

    // 画像を表示
    if (!empty($thumbnail)) {
        // サムネイル画像がある場合は表示
        $xLink_img = '<img src="'. esc_url($thumbnail) .'" width="'. esc_attr($img_width) .'" />';
    } else {
        // サムネイル画像がない場合、wordpress.comのAPIを利用してスクリーンショットを取得
        $screenshot = 'https://s.wordpress.com/mshots/v1/'. urlencode( esc_url( rtrim( $url, '/' ))) .'?w='. esc_attr($img_width) .'&h='. esc_attr($img_height);
        $xLink_img = '<img src="'. esc_url($screenshot) .'" width="'. esc_attr($img_width) .'" />';
    }

    // ドメイン名を取得してファビコンURLを生成
    $parsed_url = parse_url($url);
    $favicon_url = !empty($parsed_url['host']) ? 'https://'. $parsed_url['host'] .'/favicon.ico' : '';

    // ファビコンと外部サイト名を表示
    $site_icon_and_name = '';
    if (!empty($favicon_url)) {
        $site_icon_and_name = '<img src="'. esc_url($favicon_url) .'" alt="favicon" style="width:16px;height:16px;margin-right:5px;vertical-align:middle;" />' . esc_html($site_name);
    }

    // ブログカードHTML出力
    $sc_Linkcard = ''; // ここで初期化
    $sc_Linkcard .= '
    <div class="blogcard ex">
        <a href="'. esc_url($url) .'" target="_blank">
            <div class="blogcard-wrapper">
                <div class="blogcard-thumbnail">'. $xLink_img .'</div>
                <div class="blogcard-texts">
                    <h3 class="blogcard-title">'. esc_html($Link_title) .'</h3>
                    <p class="blogcard-excerpt">'. esc_html($Link_description) .'</p> <!-- 抜粋文をここに挿入 -->
                    <p class="blogcard-site-name">'. $site_icon_and_name .'</p> <!-- ファビコンと外部サイト名を表示 -->
                </div>
            </div>
        </a>
    </div>';

    // キャプションをブログカードの外側に追加
    if (!empty($caption)) {
        $sc_Linkcard .= '<p class="blogcard-caption">' . esc_html($caption) . '</p>'; // キャプションをカードの外に表示
    }    
    
    return $sc_Linkcard;
}

// ショートコードに追加
add_shortcode("sc_Linkcard", "show_Linkcard");

CSSファイル

.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  word-wrap: break-word;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  transform: translateY(-5px);
  transition: all 0.5s ease;
}
.blogcard a {
  padding: 5px 5px; /* 上下のパディングを小さくして調整 */
}

.blogcard:hover {
  transform: translateY(0);
  box-shadow: none;
}

.blogcard.ex {
  background-color: #f7f7f7;
}

.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
  display: block;
  height: 100%;
  padding: 15px;
}

.blogcard-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 幅が狭いときに折り返す */
  max-width: 100%; /* 親要素を超えない */
  box-sizing: border-box; /* パディングやボーダーを含める */
}

.blogcard-thumbnail {
  flex: 0 0 25%; /* 固定幅を25%にする */
  max-width: 25%; /* 幅が25%まで */
  margin-right: 10px; /* テキストと画像の間に余白を入れる */
}

.blogcard-thumbnail img {
  width: 100%; /* サムネイルのコンテナに合わせて画像を拡大縮小 */
  height: auto;
  border-radius: 5px;
  object-fit: cover; /* 画像の切り抜きをカバーにする */
}

.blogcard-texts {
  flex: 1; /* サムネイル以外の部分を残りの幅に合わせる */
  max-width: 75%; /* 残りの幅に合わせる */
  box-sizing: border-box; /* パディングやボーダーを含める */
}

.blogcard-title {
  font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.208), 1rem); /* 固定フォントサイズにする */
  font-weight: bold;
  line-height: 1;
  color: #333;
  text-overflow: ellipsis; /* 省略記号を表示 */
}

.blogcard-excerpt {
  font-size: 0.8rem; /* 文字サイズは調整可能 */
  color: #666; /* 色を指定 */
  margin: 3px 0; /* 上下に余白を設定 */
  line-height: 1.5; /* 行間の調整 */
}

.blogcard-url {
  font-size: 0.8rem;
  color: #333;
}

.blogcard-caption {
  color: #777; /* キャプションの文字色を少し薄く */
  margin-top: 3px; /* ブログカードとの間に余白を追加 */
  text-align: center; /* キャプションを中央揃えにする */
  padding: 3px; /* パディングで余白を調整 */
}

p.blogcard-caption{
	font-size: 0.7rem;
}

.blogcard-site-icon {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.blogcard-site-icon img {
    margin-right: 5px;
}

.blogcard-site-name {
    font-size: 0.8rem;
    color: #555;
    display: flex;
    justify-content: flex-end; 
}

@media (max-width: 768px) {
  /* 幅768px以下（タブレットやスマホ）で縦並びにする */
  .blogcard-wrapper {
    flex-direction: column; /* 縦並び */
    align-items: flex-start; /* 左揃え */
  }

  .blogcard-thumbnail {
    width: 100%; /* 画像を100%幅で表示 */
    max-width: 100%;
    margin-right: 0; /* 横の余白をなくす */
    margin-bottom: 10px; /* 画像とテキストの間に余白を追加 */
  }

  .blogcard-texts {
    width: 100%; /* テキスト部分も100%幅に */
    max-width: 100%;
  }
}

以上です！あ、JavaScript学習！！

月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

内部外部リンク対応プラグインなしブログカード作った！

なんかブログデザイン変えたくなり

JavaScriptの修行しています

Comments

コメントを残すコメントをキャンセル

Categories

Search the website

サキナオコ

内部外部リンク対応プラグインなしブログカード作った！

なんかブログデザイン変えたくなり

JavaScriptの修行しています

Comments

コメントを残す コメントをキャンセル

人気記事

Categories

Search the website

サキナオコ

コメントを残すコメントをキャンセル