본문 바로가기

전체 글

 (167)
워드프레스 홈페이지의 테마를 맞춤 제작(커스터마이즈)하기 워드프레스에서는 페이지와 글을 손쉽게 만들 수 있습니다. 그리고 또한 PHP 코드를 이용해 홈페이지에 다른 페이지의 정보를 불러 올 수 있습니다. 먼저 간단하게 페이지를 맞춤 제작( 커스터 마이즈) 하는 방법을 알아보도록 합시다. 홈페이지에서 다른 페이지의 데이터를 부르는 방법 1. 먼저 page.php 파일을 복사하고 복사한 파일의 이름을 front-page.php 로 바꾸어 줍니다. 2. front-page.php 코드를 열어봅시다. 아래와 같은 page.php 의 기본 코드만 들어있습니다. 웹페이지에서 보면 홈페이지의 파일이 front-page.php 로 바뀌어 있는것을 볼 수 있습니다. 3. 앞에서 만든 front-page.php 의 코드를 수정해 봅시다. 아래와 같이 태그안에 php 코드를 입력..
내 컴퓨터의 워드프레스 데이터를 웹으로 전송하는 방법 워드프레스에는 강력한 파일전송 플러그인들이 많습니다. 그 중 WP Migrate DB Pro, WP Migrate DB Pro Media, WP Migrate DB Pro Themes & Plugin 플러그인을 설치해 봅시다. 대쉬보드의 플러그인 메뉴에서 새 파일 메뉴를 선택합니다. 1. WP Migrate DB Pro 를 검색합니다. Install Now -> Activate를 선택합니다. 2. 아래와 같이 웹서버의 내 워드프레스 대쉬보드와 내 컴퓨터의 워드프레스 대쉬보드를 둘다 열고 Tools -> Migrate DB를 열어 줍니다. 3. Live Server 의 Migrate DB 에서 Settings 탭을 열고 Push 를 클릭합니다. 그리고, connection info 의 주소를 복사합니다. ..
워드프레스 라이브 서버에 설치하기 로컬 서버 대 라이브 서버 로컬 서버는 내 컴퓨터에만 있으며 다른 사람은 액세스 할 수 없습니다. 라이브 서버는 "온라인"에 있으므로 로그인 하면 액세스 할 수 있습니다. 로컬 서버에서 작업한 내 워드프레스 파일을 온라인에서 오픈하려면 라이브 서버에도 워드프레스를 인스톨 해주어야 합니다. 라이브 서버 인스톨시 알아야할 사항 • cPanel (or something similar) • FTP • phpMyAdmin 라이브 서버에 워드프레스 인스톨 하기 1. 워드프레스 사이트에 가서 워드프레스 파일을 다운받습니다. 다운 받은 zip 파일을 풀고 folder에 이름을 정해줍니다. 여기서 폴더 이름은 내가 로컬에서 작업했던 폴더이름과 같이 해주는것이 좋습니다. 워드프레스 사이트 : www.wordpress.or..
메뉴 추가하기- Function.php 사용하기 워드프레스 테마를 설치해 보면 예쁜 템플릿 들이 많지만 내가 원하는 위치에 적절한 메뉴나 편집영역이 없는 경우가 많습니다. 이때, php 코드를 편집해서 간단히 메뉴를 추가해 줄 수 있습니다. 오늘은 php 코드안에 메뉴를 추가해 봅시다. 메뉴 추가를 위한 위젯 파일 정리 하기 1. 먼저 footer widget들을 삭제해서 빈 영역으로 만들어 줍시다. Customize 로 들어가서 widgets 을 선택합니다. 여기서 footer1을 열어줍니다. 2. footer 1 영역에 있는 위젯을 클릭해서 열고 Remove 를 눌러 삭제해 줍니다. 3. 웹페이지에서 보면 footer 영역의 크기가 줄어들고 깔끔하게 정리된것을 볼 수 있습니다. 4. 홈페이지의 Edit을 눌러 편집 모드에 들어가서 설정 조절칸에서 ..
Contact Page에 플러그인 설치 및 편집하기 Contact Form 7 1. 플러그인 메뉴를 선택하고 검색창에 Contact Form 을 입력합니다. Contact Form 7이보이면 'installNow'->Activate를 눌러 플러그인을 활성화 합니다.다른 다양한 Contact Form 플러그인이 많지만 이 플러그인은 상대적으로 스타일 지정을 하기에 편리하기 때문에 많이 사용합니다. 2. 플러그인 설치가 끝나면 Page 메뉴에서 Contact 페이지를 선택하고 Edit 을 선택합니다. 3. 페이지 편집창이 열리면 [ + ] 버튼을 눌러서 Contact Form 7을 선택합니다. 앞에서 플러그인을 설치하면 블럭에디터에 나타납니다. 4. 편집창에 Contact Form 7의 블럭이 나타납니다. 'Update' 를 누른 후 Preview를 눌러 화..
카테고리 만들기 - 태그별 카테고리 나누기 페이지를 카테고리별로 나누어 관리하면 편리합니다. 그리고, 이 카테고리를 홈페이지에서 불러 들이면 홈페이지에서 관련 카테고리에 쉽게 들어갈 수 있도록 도와줍니다. 아래와 같이 각 포스트에 태그를 만들고 카테고리로 나누는 방법을 익혀봅시다. 포스트 등록하기 1. 카테고리로 분리해 줄 수 있는 포스트를 먼저 만듭니다. Posts -> Add New 를 선택하고 Web 과 Graphic으로 나누어 각 세개씩 포스트를 등록해 주었습니다. 카테고리 만들기 1. Posts -> Categories 를 선택하고 앞에서 만든 포스트를 카테고리 별로 나누기 위해 Add new Category 에서 Web 과 Graphics 하나씩 입력해서 만들어줍니다. 2. 다시 Posts -> All Posts 를 선택하고 앞에서 만..
Block Editor로 편리하게 페이지 레이아웃 디자인 하기 워드프레스는 강력한 편집 툴을 가지고 있는데 그중 하나가 Block Editor 입니다. 이것만으로도 간단한 페이지 레이아웃을 할 수 있습니다. 간단하게 페이지 하나를 꾸며봅시다. 이미지 블럭 활용하기 1. 저장되어 있는 샘플 페이지 하나를 열고 저장되어 있는 텍스트 블록을 선택해 봅시다. 2. 좌측에 블럭 에디터 창이 열리고 이미 셋팅되어 있는 텍스트 블럭과 이미지 블럭, 갤러리, 미디어 등 필요한 개체를 찾아 입력할 수 있습니다. 3. 텍스트 블럭의 사이에 [ + ] 버튼을 누르면 원하는 블럭을 추가할 수 있습니다. 4. [ + ] 버튼을 누르고 이미지 블럭을 하나 넣어봅시다. 이미지 아이콘을 선택하면 파일을 업로드할 수 있는 창이 열립니다. 5. 'Update'를 누르고 'Preview'를 눌러 페..
Font awsome을 이용한 홈페이지 로고와 파비콘 등록하기 Font awsome 페이지에 들어가면 다양하고 예쁜 아이콘 파일들을 다운 받을 수 있습니다. 먼저 아래 주소로 들어가 봅시다. fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 아이콘 이미지와 코드 다운 받기 폰트 어썸 홈페이지에 들어가면 무료로 사용할 수 있는 아이콘과 유료 아이콘들이 있습니다. 여기서 무료 아이콘을 사용해 봅시다. fan 모양의 아이콘을 찾았습니다. 여기서 ' start using this icon' 버튼을 누릅니다. 팝업 윈도우가 열리고 이 아이콘을 ..

티스토리툴바