makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

워드프레스 홈페이지 하단(footer) 영역 꾸미기

워드프레스 홈페이지 하단 영역에 정보, 링크, 베너 아이콘을 배치하여 다양한 정보를 제공할 수 있도록 만들어 보겠습니다.

[관리자] > [외모] > [BCT footer text]에 접속합니다.

하단 정보를 작성할 수 있는 텍스트 상자가 보입니다.zpost_03img01

1. 사이트 정보 작성하기

작성할 내용을 다음과 같이 텍스트로 입력합니다.

zpost_03img0101

홈페이지에서 확인해 보면, 아무런 태그를 지정하지 않아 그냥 주~욱 글자들이 이어져 출력됩니다.

zpost_03img02

2. 태그 활용하여 스타일 적용하기

작성해 놓은 텍스트에 <br/>, <a> 태그등을 활용하여 줄바꿈을 해주고, 텍스트에 링크를 걸어줍니다.

zpost_03img03

태그가 적용된 상태로 홈페이지에 출력됩니다.

태그를 더해주는 것만으로 BC TOWN™ 테마에 미리 지정되어 있는 스타일이 적용되어 보기 좋게 출력됩니다.

zpost_03img04

3. 이미지를 삽입하고 링크 걸기

텍스트 아래쪽으로 이미지를 배치하고 링크를 걸어 보도록 하겠습니다.

미리 준비한 아래의 그림과 같은 이미지를 워드프레스 [미디어]에 업로드 합니다.

zpost_03img07

업로드한 이미지를 클릭하여 상세보기 화면에 접속합니다.

오른쪽 파일 정보에서 ’URL’에 적혀있는 주소를 복사합니다. 이미지가 위치한 URL정보 입니다.

zpost_03img08

아래의 그림과 같이 텍스트 아래쪽에 이미지를 삽입하고, 링크를 걸어주는 HTML을 작성해 줍니다.

이미지 위치는 위의 이미지 URL을 적어주면 됩니다.

zpost_03img05

홈페이지 하단에 텍스트와 이미지가 함께 출력됩니다.

zpost_03img06

2 Responses

  1. 안녕하세요. 구글링하다가 좋은 정보를 얻고갑니다. 요사이 제가 워드프레스로 쇼핑몰을 만들고 있는데 한가지 고민이 있어서 좀 무례하지만 문의를 드립니다.

    footer부분에 signup과 social icon이 옆으로 나란히 되어있는데 이것을 상하로 한 단락에 함께 넣고싶은데 아직 초보인지라 방법을 찾질 못하고 있습니다. 혹시 방법이 있을지하고 문의드립니다.

    감사합니다.

    1. 이 글과 같이 관리자에서 푸터에 html 형태로 작성해주는것이 아니라면,
      사용하고 계시는 테마 파일의 푸터 영역을 출력하는 파일(footer.php와 같은 이름으로 된 파일)을 열어 직접 수정한 후, 스타일 또한 수정하시어 작업해 주어야 합니다.

      도움이 되었는지 모르겠습니다. ^^

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우원인파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
Permission denied (publickey) 해결 방법
Plesk에서 생성된 system user로 ftp 접속 시 다음과 같은 에러 메시지가 발생하면서 접속이 되지 않습니다.상태: 152.67.193.32:49152에 연결... 응답: fzSftp...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다.1. apt update사용자...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...

BCT Ai Chatbot

답변을 준비중입니다 . . .