워드프레스 애견 블로그 만들기 전면 페이지 제작

안녕하세요 저번 시간에 워드프레스 페이지 자체를 빈페이지로 만들어 독창적이고 자신의 아이덴티티를 넣을 수 있는 블로그를 만들기 위한 준비를 했습니다. 그럼 이제 거기에 맞춰 블로그 전면 페이지 제작을 해보겠습니다.

저는 우선 애견관련 블로그를 예시로 만들어 보겠습니다. 다른 원하는 주제가 있을 경우엔 다른 이미지, 주제를 사용하셔도 무방합니다. 제가 제작한 페이지는 예시 페이지일 뿐이며 SEO친화적이지 않기 때문에 사용을 하려면 어느정도 커스터마이징을 하시는 것을 추천을 드립니다.

제가 만든 워드프레스 블로그 10분 제작 방법이 마음에 드신다면 소스코드를 사용하셔도 좋습니다. 아래에는 전체적인 완성 페이지를 볼 수 있는 영상을 추가했으니 참고해주시면 감사하겠습니다.

이번 게시글에 중점적으로 다룰 부분들

• 워드프레스 빈 페이지에 헤더와 메뉴바 추가하기
• 워드 프레스 블로그 메인 메뉴 만들기
• 엔바토 플러그인을 이용한 웹 퍼블리싱

워드프레스 빈 페이지에 헤더와 메뉴바 추가하기

워드프레스 빈페이지 화면

저번 게시글에서 빈페이지를 만들어 정말 아무것도 없이 깨끗한 모습입니다. 만약 지금 게시글이 처음이라 빈페이지가 아니거나 필요한 플러그인이 없을 경우엔 아래 게시글 링크에서 확인을 하신 이후 준비를 해오시는 것을 추천을 드립니다.

워드프레스 플러그인 게시글

워드프레스 빈페이지 제작

워드프레스 엘리멘터 페이지 크기 설정

엘리멘터 편집기

원활한 퍼블리싱을 위해 우선적으로 저희가 작업할 페이지의 레이아웃 권한을 전체 너비로 설정을 하겠습니다. 이렇게 되면 보다 자연스럽고 반응형 페이지를 제작을 할 때에 큰 도움이 되기 때문에 귀찮더라도 꼭!! 전체 크기를 설정을 하시고 제작을 하는 것을 추천을 드립니다.

HTML 에디터를 위한 컬럼 추가

엘리멘터에서 선택할 수 있는 메뉴들

1개의 컬럼 추가

사용자 정의 html을 컬럼에 넣어 주세요

전체크기 헤더를 제작하기 위해선 설정에서 전체 너비로 수정을 해주세요

사용자정의 html로 헤더바 제작 완료

우선적으로 저희는 헤더를 만들 것 입니다. 하지만, 제가 제작한 소스코드들은 SEO친화적인 것이 아닌 단순 퍼블리싱용으로 만드는 헤더이기 때문에 실제로 블로그에 사용하실 때엔 <div>요소가 아닌 <header>요소로 변형을 하시거나 취향에 알맞게 커스터 마이징을 하는 것을 추천을 드립니다.

워드프레스 블로그 헤더 소스코드

<div class="main_top">
    <div class="mo"></div>
    <div class="my_name">
        <a href="#">I Love Cat</a>
    </div>
    <ul class="menu_top">
        <li class="menu1"><a href="#">고양이 종류</a></li>
        <li class="menu1"><a href="#">고양이 성장</a></li>
        <li class="menu1"><a href="#">고양이 문의</a></li>
    </ul>
</div>


<style>
    * a:link {
        opacity: 1;
    }
    .main_top {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        position: fixed;
        top: 0px;
        left: 0;
        background-color: white;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
        z-index: 10;
    }
    .mo {
        display: block;
        width: 30px;
    }
    .my_name {
        font-size: 25px;
        font-weight: bold;
        opacity: 1;
        display: block;
    }
    .my_name a:link {
        color: black;
    }
    .my_name a:hover {
        color: #00CDFF;
    }
    ul {
        list-style: none;
    }
    .menu_top {
        widows: 100%;
        height: 40px;
        margin-left: 300px;
    }
    .menu1 {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 0px;
        margin-left: 0px;
        float: left;
        opacity: 1;
        margin-top: 12px;
        margin-left: 60px;
    }
    @media screen and (max-width: 960px) {
        /* 화면 너비가 767px 이하일 때 적용될 CSS */
        .main_top {
            height: auto;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .mo {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .my_name {
            font-size: 20px;
        }
        .menu_top {
            margin-left: 0;
            margin-top: 20px;
        }
        .menu1 {
            margin-left: 0px;
        }
    }
</style>

워드 프레스 블로그 메인 메뉴 만들기

이제 헤더바를 만들었으니 사용자들이 우리의 블로그를 방문을 할 경우 보다 편하게 정보를 찾을 수 있도록 구조화를 시키는게 중요한데요 거기에 있어 좋은 길잡이가 되는 것은 역시 메뉴바 입니다. 앞선 헤더 제작과 마찬가지로 사용자 정의 html을 사용을 할 것입니다. 

 사용자정의 html 추가

워드프레스 미디어 라이브러리 페이지

로고 이미지의 주소를 복사를 합니다.

그전에 메인 메뉴바에는 보통 사이트의 아이덴티티가 되어 주는 로고가 들어갑니다. 디자인 툴 또는 무료 로고제작 서비스를 이용을 하여 어렵지 않게 로고를 뽑아 낼 수 있으니 먼저 로고를 뽑으신 다음 다음 차례를 진행을 하겠습니다.

무료로고 추천 사이트 윅스로 이동

자, 이제 로고까지 다 다운로드가 완료가 되었다면 본격적으로 메뉴바 제작을 해봅시다.

메뉴바 제작 완성

자 이제 메뉴바와 로고만 들어갔는데 얼추 그럴싸한 블로그의 형태가 보이기 시작합니다. 이처럼 로고의 유무 차이는 블로그의 완성도가 달라 보이는 효과가 있으니 되도록 로고를 사용할 수 있다면 사용하는 것을 적극 추천을 드립니다.

블로그 메뉴바 제작 소스코드

<div class="title">
  <a href="https://www.hwankour.com/">
    <img src="http://43.200.254.244/wp-content/uploads/2023/07/2.webp" alt="로고">
  </a>
</div>
<div class="navbar">
  <a href="www.hwankour.com/">Domestic cats</a>
  <a href="https://www.hwankour.com/">Wild cats</a>
  <a href="www.hwankour.com/">Exotic cats</a>
  <a href="#">Hybrid cats</a>
  <a href="#">Big cats</a>
</div>
<div class="funcs">Big Cats'Blog</div>

<style>
.title {
  font-weight: bold;
  padding: 50px 0;
  text-align: center;
}

.title img {
  width: 300px;
  height: 300px;
}
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  color: #fff;
  font-size: 16px;
}
.navbar a {
  text-decoration: none;
  margin: 0 60px;
}
.funcs {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  color: black;
  font-size: 22px;
  margin: 8px 0px;
}
.funcs::before,
.funcs::after {
  content: "";
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.35);
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 16px;
}

@media only screen and (max-width: 600px) {
  .navbar {
    flex-direction: column;
    height: auto;
  }
  .navbar a {
    margin: 10px;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    max-width: 600px;
  }
  .dropdown:hover .dropdown-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }
  .dropdown-content img {
    width: 300px;
    height: 150px;
    margin: 10px;
  }
}
</style>
    

이제 메뉴바 제작도 완성이 되었습니다. 기본적인 틀은 잡힌 셈이며 이제는 정말 블로그의 콘텐츠와 부과적인 설명 그리고 푸터 정도만 제작을 완료를 하면 블로그 제작 뚝딱입니다.

관련 콘텐츠 페이지에 첨부하기

울티메이트 포스트 킷 플러그인을 이용하여 예쁘게 게시글을 넣어 봅시다.

게시글을 추가한 블로그 전면 페이지

이제 게시글까지 첨부를 했으니 블로그의 완성도가 더 높아졌습니다. 콘텐츠 영역을 상단에 잡을지 중단에 잡을지 이것은 블로그 주인의 마음입니다. 저 같은 경우엔 블로그는 글이 잘보여서 사람들이 내 블로그의 정보를 잘 찾고 이용을 하는 것이 중요하다 생각을 하기 때문에 상단 아니면 중단에 보통 게시글을 넣는 편입니다. 이건 취향이니 마음대로 해주세요

엔바토를 선택을 해주세요

이제부턴 선택의 영역입니다. 블로그를 조금 더 웹사이트 처럼 꾸미며 홈페이지형 블로그를 만들고 싶은 사람은 글을 끝까지 읽어주세요 실제로 워드프레스가 정말 좋은 이유는 코딩에 대한 지식이 정말 1개도 없어도 플러그인들의 활용만 잘해도 멋있는 사이트를 만들 수 있는 이유를 보여드립니다.

엔바토 플러그인을 이용한 웹 퍼블리싱

엔바토 템플릿 접속 화면

원하는 템플릿을 다운로드 받으시면 됩니다.

푸터 설정

엔바토를 이용해 원하는 템플릿을 다운로드 이후 콘텐츠 영역 밑에 추가만 하시면 홈페이지형 블로그처럼 퀄리티가 높게 제작이 가능합니다. 저 같은 경우엔 퍼블리싱 예시를 위해 일부러 모든 영역을 div코드로 통일을 하였으며 올바른 퍼블리싱을 위해선 span으로 바꾸거나 원하는 요소로 바꾸어 사용하시는 것이 SEO 적으로 더 좋은 방향으로 작용을 합니다.

또한 모든 웹 퍼블리싱엔 정답은 없으며 자신이 만족을 할 수 있는 페이지 디자인이 정답이라 생각을 합니다. 거기에 있어 사용자가 편리하게 사용을 할 수 있는 기능들이 있으면 더 좋은편이구요

오늘은 워드프레스 블로그 퍼블리싱은 이정도로 마무리를 하고 앞으로 더 다양한 정보와 꿀팁을 들고 돌아오겠습니다. 감사합니다.