WordPressブログでリットリンク風のページを作るカスタマイズ方法

WordPressブログにリットリンク風のリンク集を作るカスタマイズ方法をご紹介します。InstagramやTwitterに貼るページとして、lit.linkやInstabioのようなデザインの方が親しまれていますよね。

ということで、WordPressブログでもリットリンク風のページを作ってみました💡ちなみに今回のカスタマイズできる完成形はこんな感じです👇

chobo

ちょぼです。インスタ･Twitterもやってます。初めての方はプロフィールからどうぞ👈

タップして公式サイトをチェック【PR】

ロリポップ！

目次非表示

WordPressブログでリンク集を作るメリット
WordPressにリットリンク風のページを作る方法
WordPressブログをはじめならロリポップ

WordPressブログでリンク集を作るメリット

今回のカスタマイズはHTMLやCSSのカスタマイズが必要なので、lit.linkやInstabioを利用するより少し大変です。作業途中で「こんな面倒なことをするならリットリンク使えばいいや。」となってしまうと思うので、先にWordPressブログで作るメリットをご紹介しておきます😄

WordPressブログでリンク集を作るメリット

アフィリエイトの審査が通りやすくなる
アフィリエイト広告を貼るにはサイト毎の審査が必要です。リンク集しかコンテンツがないlit.linkよりもブログを通した方が審査が通りやすくなります✨
アドセンス広告も貼れる
今の時代一番アクセスを誘導しやすいのがSNSですよね。大量のアクセスが流れてくるプロフィールページにWordPressブログであればアドセンス広告を貼ることができます。

他にもSNSからのブログ流入を増やすことで、ブログのSEO効果を高めるといった効果も期待できます。ですが、やはり直ぐにメリットを実感できるのは上の2つだと思います😊それでは頑張ってカスタマイズ方法をご紹介します。

WordPressにリットリンク風のページを作る方法

具体的なカスタマイズの手順をご紹介していきます💁‍♂️

今回のカスタマイズに必要なもの

今回のカスタマイズ作業をするのに必要なのは以下の2つです。

FileZilla（FTPクライアント）
Atom or サクラエディタ（UTF-8対応エディタ）

同じ機能を持つソフトなら他のものでも大丈夫です👍僕はFileZillaとAtomを使ってやっています。

パソコンにこの2つのソフトをダウンロード・インストールしたら、早速カスタマイズに取り掛かりましょう❗️

カスタムページテンプレートを作る

WordPressブログのテーマでは上から「ヘッダー（ブログタイトル）→投稿のタイトル→コンテンツの中身→サイドバー→フッター」という構造になっているものが多いですよね。

なので、投稿や固定ページにリンク集を作ったとしても、lit.link風にはなりません。lit.linkのような見た目のページを作るには、「プロフィールアイコン→SNSアイコン→リンク集」というような構造のページを作る必要があります。

今回は固定ページのテンプレートを元に、lit.link風の自作テンプレートを作る方法をご紹介します。

テンプレートの自作方法

固定ページの自作テンプレートを作成するのは実は簡単です☝️テンプレートファイルの頭に以下のタグを付けるだけで作れます✨

<?php
/**
* Template Name: LinkCard
* Template Post Type: page
*/
?>

具体的な手順をご紹介します。まずは利用しているテーマの「page.php」をダウンロードして下さい。FilleZillaを使ってサーバーにアクセスし、「wp-content→themes→使用しているテーマ→page.php」をダウンロードすればOKです。

ダウンロードした「page.php」をUTF-8対応のエディタで開きます。開いたら一番上に以下のコードを追記して下さい。

テンプレートネームは自分がわかりやすいものならなんでもOKです。追加したらファイル名を「page-〇〇.php」に変更して保存します。

名前を変更して保存したら、そのファイルを子テーマのフォルダにアップします。

これでWordPressの固定ページで自作のテンプレートが選べるようになりました❗️早速確認してみましょう。

WordPress管理画面から「固定ページ」→「新規追加」を押して、固定ページ作成画面を開きます。右側の「ページ属性」を見ると、先ほどアップロードしたテンプレート名が選択出来るようになっているはずです✨

自作テンプレートを選択したら、あとは自分が好きなようにカスタマイズしていきます。作成した「page-〇〇.php」の中身は好き勝手変更しても他のページのデザインには影響を与えないので安心です。

無料テーマCocoonを利用する場合

「page-〇〇.php」の中身の変更方法ですが、全くゼロから作るよりも使用しているテーマのコードを流用するのがおすすめです。今回はWordPressテーマの中でも特に利用している人が多い無料テーマ「Cocoon」を例にご紹介します。（要望があれば他のテーマでのやり方も追加予定なので、ぜひコメント下さい🤗）

今回のカスタマイズでできる完成イメージ

Cocoonには最初からプロフィールをサイドバーに簡単に設置できるウィジェットが用意されています。自動でSNSアイコンも作成してくれるので、この機能を利用しましょう。今回のカスタマイズを最後までやっていただければ、以下のようなページが出来上がります👇

プロフィールウィジェットを作成する

まずはCocoonの標準機能であるプロフィールウィジェットを作成します。「外観→ウィジェット→[c]プロフィール」というウィジェットを選択します。

「あなたのプロフィール」リンクから移動し、プロフィール画像やSNSのURLを入力します。

するとサイドバーに以下のようなプロフィールが設置されるはずです✨

固定ページを作成

固定ページにリンク集を作成しておきます。「固定ページ→新規作成」をクリック。投稿タイトルを入力し、本文には「カスタムHTML」ブロックを使って、以下のコードを入力して下さい。

リンク集を作成するコードはこちら。

<div class="list ect-vertical-card-2 ect-vertical-card ect-2-columns front-page-type-index sp-entry-card-1-column"> <a class="link_button" href="http://test.local/article2/"> <article class="link_button_article"> <figure class="link_button_img"> <img src="http://test.local/wp-content/themes/cocoon-master/images/no-image-320.png" alt="" class="no-image entry-card-thumb-image list-no-image" width="320" height="180"> </figure> <div class="link_button_info"> <h2>リンク１</h2> <p>リンク1の説明文</p> </div> </article> </a> <a class="link_button" href="http://test.local/article2/"> <article class="link_button_article"> <figure class="link_button_img"> <img src="http://test.local/wp-content/themes/cocoon-master/images/no-image-320.png" alt="" class="no-image entry-card-thumb-image list-no-image" width="320" height="180"> </figure> <div class="link_button_info"> <h2>リンク2</h2> <p>リンク2の説明文</p> </div> </article> </a>
</div>

後でこの中身は変更するとして、ページ属性で自作テンプレートを選択、パーマリンク設定でURLを入力します。

ここで決めたURLがlitlink風ページのURLになります。この時点ではデザインは整っていません。デザインを変更していくのは次からです。

page-〇〇.phpをカスタマイズ

続いて、自作した固定ページテンプレート「page-〇〇.php」の中身を変更します。以下の内容にまるまる置き換えて保存して下さい。

<?php
/**
* Template Name: LinkCard
* Template Post Type: page
*/
?>
<?php //通常ページとAMPページの切り分け
/** * Cocoon WordPress Theme * @author: yhira * @link: https://wp-cocoon.com/ * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later */ if ( !defined( 'ABSPATH' ) ) exit; //固定ページ内容 get_template_part('linkcard-html'); ?> <?php get_footer(); ?>

変更点は先ほど紹介した自作テンプレートの認識タグを最初に付け加えていることと、「linkcard-html」という名前のファイルを読み込む内容に書き換えています。

「linkcard-html」というファイルは存在しないので、これから作っていきます。

linkcard-html.phpを作成

「page-〇〇.php」の中身を書き換えた時と同様に、utf-8対応のエディタで開いて、以下のコードに中身を置き換えて下さい。

<?php
/** * Cocoon WordPress Theme * @author: yhira * @link: https://wp-cocoon.com/ * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later */
if ( !defined( 'ABSPATH' ) ) exit; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
<meta name="referrer" content="no-referrer-when-downgrade"/>
<?php //ヘッドタグ内挿入用のアクセス解析用テンプレート
get_template_part('tmp/head-analytics'); ?>
<?php //AMPの案内タグを出力
if ( has_amp_page() ): ?>
<link rel="amphtml" href="<?php echo get_amp_permalink(); ?>">
<?php endif ?>
<?php //Google Search Consoleのサイト認証IDの表示
if ( get_google_search_console_id() ): ?>
<!-- Google Search Console -->
<meta name="google-site-verification" content="<?php echo get_google_search_console_id() ?>" />
<!-- /Google Search Console -->
<?php endif;//Google Search Console終了 ?>
<?php //preconnect dns-prefetch
$domains = list_text_to_array(get_pre_acquisition_list());
if ($domains) { echo '<!-- preconnect dns-prefetch -->'.PHP_EOL;
}
foreach ($domains as $domain): ?>
<link rel="preconnect dns-prefetch" href="//<?php echo $domain; ?>">
<?php endforeach; ?>
<?php //Google Tag Manager
if (is_analytics() && $tracking_id = get_google_tag_manager_tracking_id()): ?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<?php echo $tracking_id; ?>');</script>
<!-- End Google Tag Manager -->
<?php endif //Google Tag Manager終了 ?>
<?php //自動アドセンス
get_template_part('tmp/ad-auto-adsense'); ?>
<?php //WordPressが出力するヘッダー情報
wp_head();
?>
<!-- Preload -->
<link rel="preload" as="font" type="font/woff" href="<?php echo FONT_ICOMOON_WOFF_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/ttf" href="<?php echo FONT_ICOMOON_TTF_URL; ?>" crossorigin>
<?php if (is_site_icon_font_font_awesome_4()): ?>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_4_WOFF2_URL; ?>" crossorigin>
<?php else: ?>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_BRANDS_WOFF2_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_REGULAR_WOFF2_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_SOLID_WOFF2_URL; ?>" crossorigin>
<?php endif; ?>
<?php //カスタムフィールドの挿入（カスタムフィールド名：head_custom
get_template_part('tmp/head-custom-field'); ?>
<?php //headで読み込む必要があるJavaScript
get_template_part('tmp/head-javascript'); ?>
<?php //PWAスクリプト
get_template_part('tmp/head-pwa'); ?>
<?php //ヘッドタグ内挿入用のユーザー用テンプレート
get_template_part('tmp-user/head-insert'); ?>
</head>
<body id="linkcard" itemscope itemtype="https://schema.org/WebPage" data-barba="wrapper">
<?php //body最初に挿入するアクセス解析ヘッダータグの取得 get_template_part('tmp/body-top-analytics'); ?>
<?php //サイトヘッダーからコンテンツまでbodyタグ最初のHTML
get_template_part('tmp/body-top'); ?>
<?php //プロフィールウィジェットを追加
the_widget( 'AuthorBoxWidgetItem'); ?>
<?php //固定ページ内容
get_template_part('tmp/page-contents'); ?>

保存の際にファイル名を「linkcard-html.php」という名前で保存しましょう。長く感じるかもしれませんが、このコードも元々Cocoonに用意されているもので、変更した箇所はほんのわずかです。

bodyタグに”linkcard”というクラスを付けたのと、プロフィールウィジェットを読み出すコードを追加しました。

保存したら「linkcard-html.php」も合わせて子テーマフォルダにアップロードします。

style.cssに内容を追記

続いて、ページのデザインを整えるCSSを変更します。Cocoonの子テーマフォルダにある「style.css」に以下のコードを追記して下さい。

/*必要ならばここにコードを書く*/
@media screen and (max-width: 1280px){ #linkcard .main { width: 100%; }
}
#linkcard{ max-width: 630px; margin:0 auto;
}
#linkcard header#header,#linkcard .date-tags,#linkcard .sns-share-buttons,#linkcard .article-footer, #linkcard #sidebar{ display: none;
}
#linkcard .content { margin-top: 0;
}
#linkcard .article h1 { font-size: 16px; padding: 10px 0;
}
.link_button{ color: #555; text-decoration: none; cursor: pointer;
}
.link_button_article{ position: relative; width: 100%; margin: 0 0 1em; padding: 7px; border-radius: 5px; overflow: hidden; background: #fff; cursor: pointer; transition: 0.3s ease-in-out; box-shadow: rgb(0 0 0 / 13%) 0 2px 8px;
}
.link_button_img{ width: 40px; height: 40px; box-shadow: 2px 3px 8px -5px rgb(0 0 0 / 25%); display: table-cell; vertical-align: middle;
}
.link_button_img img { width: 100%; border-radius: 3px; vertical-align: middle;
}
.link_button_info{ display: table-cell; vertical-align: middle; width: calc(100% - 90px); padding-left: 10px; vertical-align: middle;
}
.link_button_info h2{ margin: 0; padding:0; font-size: 12px; background:none; border:none;
}
.link_button_info p { margin: 3px 0 0; font-size: 10px; font-weight: 700; line-height: 1.5; word-break: break-all;
}

追記したら同じ名前で保存。style.cssもFillezillaで子テーマフォルダにアップロードします。（上書きして置き換える）

スタイルシートがアップロード出来たらページを見てみましょう。以下のようにlitlink風なページに変わっているはずです✨