반응형

워드프레스 11

워드프레스 컨테이너에 외부 링크 추가 삽입하기

워드프레스에서 버튼이 아닌 컨테이너 자체에 링크를 넣는 방법은 여러 가지 있겠지만, 제가 사용하는 방법을 보여드릴게요. 제일 간단한 방법은 "레이아웃->추가옵션(제일하단)->html 타입을 링크로 변경->링크삽입" 이지만, 이 방법은 레이아웃이 깨지는 경우가 있습니다. 그래서 다른 방법을 보여드릴게요.  1.우선 클레스 id에서 값을 입력해줍니다.2.그리고 css에서 마우스호버 효과를 작성합니다.아래의 css를 넣어주세요.#wallet { cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */ transition: background-color 0.3s; /* 배경 색상 변화 애니메이션 */}#wallet:hover { background-color: #242424;..

워드프레스 2024.09.30

워드프레스에서 맞춤형 스크롤 박스 만들기

웹사이트를 디자인할 때, 사용자 경험을 개선하는 작은 요소들이 큰 차이를 만들 수 있습니다. 워드프레스 사이트에 맞춤형 스크롤 박스를 추가하는 방법을 공유하고자 합니다. 이 스크롤 박스는 텍스트의 하단 부분이 점차 흐려지는 효과와 맞춤형 스크롤바를 포함합니다. 이는 사용자들에게 보다 세련되고 전문적인 인상을 주는 동시에, 페이지의 내용을 쉽게 탐색할 수 있게 해줍니다. 특정 구간에서 많은 량의 텍스트를 도출 해야 할 때 유용하게 사용 할 수 있습니다. 1. 스타일링과 구조 설정 먼저, 스크롤 박스의 기본 스타일과 구조를 설정합니다. 이것은 HTML과 CSS를 사용하여 수행됩니다. 아래 코드는 스크롤 박스의 HTML 구조와 함께 기본 CSS 스타일을 보여줍니다: HTML 삽입 미리보기할 수 없는 소스 여기..

워드프레스 2024.01.05

워드프레스 Icon Class 아이콘 클래스 찾아서 넣기 (플러그인 없음)

워드프레스 빌드를 하다보면, 아이콘을 넣어야하는데 아이콘을 선택하는 항목은 없고 아이콘 클래스값을 입력하라고 하는 경우가 더러 있습니다. 참 난감한게 아이콘의 이미지와 이름도 알려주지 않으면서 아이콘클래스를 입력하라고 하니 도대체 멀 입력해야 할지 모를 수 밖에 없습니다. 우선 버튼 두개의 예시를 들어보겠습니다. 1.첫번째 좌측 녹색의 버튼 -Icon Class 값을 넣지 않고 SVG를 업로드 하거나, 아이콘 이미지를 보고 선택 하는 버튼 이 경우는 아이콘을 삽입하는데 어려움이 없습니다. 아이콘을 보면서 선택 할 수 있기 때문입니다. 2.두번째 우측 파란색의 버튼 -아이콘클래스 Icon Class를 입력하여 아이콘을 삽입하는 버튼 문제는 이러한 유형인 경우입니다. 저도 이것 때문에 정말 많이 헤매였는데요..

워드프레스 2023.04.12

워드프레스 호스팅어 메일 설정 WordPress SMTP플러그인 사용

워드프레스 웹사이트에서 메일 송수신 워드프레스 테마를 사용하다보면, 웹사이트 접속자가 홈페이지 관리자에게 메일을 보내는 항목이 있는데요 테마의 페이지에는 있지만, 정작 기능이 정상적으로 설정 및 활성화 되지 않아서 무용지물인 경우가 많습니다. 저도 처음에는 설정 방법을 모르기도 하고, 그닥 필요도 없어서 그냥 삭제했었는데요. 이번에 필요하게 되어서, 메일 발송 설정 방법을 공유 합니다. 이 메일 방법은 웹사이트에 접속한 유저가 관리자에게 이메일 주소를 보내는 방법입니다. 메일폼을 구성하는 방법에 따라서 단순 이메일 이외에 메시지도 보낼 수 있지만, 이번편은 단순히 유저의 이름과 메일만 보내는 방법만 포스트 합니다. 워드프레스 이메일 발송 / WordPress SMTP를 구성하는 방법 WordPress S..

워드프레스 2023.04.07

워드프레스 뷰튜브 만들기 8편(하단 바닥 정보링크, 랜딩페이지 영상 재생 중지)

워드프레스 뷰튜브 만들기 8편(하단 바닥 정보링크, 랜딩페이지 영상 실행 중지) 8편에서는 어떤걸 작성해볼까 하다가, 하단 영역을 수정하지 않았다는 것을 알았습니다. 하단 영역 수정하는 방법과 랜딩 페이지에서 동영상이 재생 되지 않도록 해보겠습니다. 랜딩 페이지에서 재생 되면, 광고가 나타나지 않기 때문에, 광고를 원만하게 노출 시키려면 랜딩 페이지에서 재생이 되지 않도록 해야겠지요? 자 시작합니다~ 1.하단정보 영역 수정 아래의 이미지의 빨간색 영역을 수정해보겠습니다. 페이지 탭에서 하단 페이지가 없어서 많이 당황하셨을 텐데요. 수정 페이지가 다소 엉뚱한 곳에 있습니다. 가끔 헤더와 바닥 페이지를 편집하는 탭이 따로 있기는 한데요. 이 영역은 템플릿에 있습니다. 뷰튜브에서 -> 바닥 -> here를 클..

워드프레스 2023.03.14

워드프레스 뷰튜브 만들기 7편(동영상업로드,광고등록) 나만의 유튜브공간

2023.03.12 - [워드프레스] - 워드프레스 뷰튜브 만들기 6편(초기설정5)쿠팡광고배너 넣기 2023.03.11 - [워드프레스] - 워드프레스 뷰튜브 만들기 5편(초기설정4)메뉴 이미지 넣기 2023.03.10 - [워드프레스] - 워드프레스 뷰튜브 만들기 4편(초기설정3)동영상 카테고리 및 메뉴 설정하기 2023.03.09 - [워드프레스] - 워드프레스 뷰튜브 만들기 3편(초기설정2) 메인로고 변경 웹사이트 제목 수정, 메인 배너 교체 2023.03.09 - [워드프레스] - 워드프레스 뷰튜브 만들기 2편(초기설정1) 나만의 유튜브 공간(로고변경,바닥정보,팝업창) 2023.03.08 - [워드프레스] - 워드프레스 뷰튜브 만들기 1편(설치) 나만의 유튜브 공간 이번에는 뷰튜브 테마에 영상을 ..

워드프레스 2023.03.13

워드프레스 뷰튜브 만들기 5편(초기설정4)메뉴 이미지 넣기

워드프레스 뷰튜브 만들기 5편 - 메뉴에 이미지 넣기! 어찌어찌 포스팅을 쓰다보니, 벌써 5편 까지 왔네요. 뷰튜브 만들기는 대략 20편 까지 작성 될 것 같습니다. 이걸 마무리 하면, 다시 NFT마켓플레이스편을 작성해야겠습니다. 이전편에서 만든 메뉴의 좌측 아이콘을 넣는 방법을 시작하겠습니다~! 1. 메뉴에 아이콘 삽입하기. 유저페이지에서 좌측 메뉴를 보시면, 메뉴 아이콘이 있는 것과 없는 것을 볼 수 있습니다. 이 곳에 아이콘을 변경하거나 추가해보겠습니다. 관리자패널에서 모양 -> 메뉴로 이동합니다. 메뉴를 확장해보면 폰트를 선택 할 수 있는 드롭바가 있습니다. 여기에서 메뉴를 선택하고 저장하면 메뉴 아이콘이 적용 됩니다. 그런데 궁굼한게 있으실텐데요. 드롭바에는 아이콘 이름만 나타나고 이미지가 보여..

워드프레스 2023.03.11

워드프레스 뷰튜브 만들기 4편(초기설정3)동영상 카테고리 및 메뉴 설정하기

이전 포스팅에서는 웹사이트 아이덴티를 꾸미는 작업을 하였는데요 (로고,다크 버전 로고, 웹사이트 이름) 이번에는 동영상 카테고리 만들기와 웹사이트 메뉴를 만들어 보는 작업을 해보겠습니다. 현재 이 포스팅과 동시에 작업중인 웹사이트 입니다. 참고하여 주시면 되겠습니다. ^^ https://tube.mcgret.com/ mtube - tubes신도시종합격투기 도민체전 선발전 Action 2023 2 h 20 min 4K 2023년 양산시 도민체전 선발전 -52KG 박민찬 (신도시MMA) 확정 영상보기 The Pale Door Action 2021 2 h 20 min HD In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance a t..

워드프레스 2023.03.10

워드프레스 뷰튜브 만들기 3편(초기설정2) 메인로고 변경 웹사이트 제목 수정, 메인 배너 교체

워드프레스 뷰튜브 설정하기. ​ 이전글에서는 다크모드에서 로고는 변경해보았다면, 이번에는에는 메인 로고를 변경 하는 방법 부터 시작해보겠습니다. ​ 1.메인로고 변경하기 2.웹사이트 제목 변경하기 3.랜딩 페이지에서 메인 배너 변경하기 메인 로고 변경하기 계기판에서 커스텀마이징으로 이동합니다. 그러면 화면이 바뀌면서 아래와 같은 화면으로 넘어갑니다. 사이트 아이덴티를 누르면 로고를 변경 할 수 있는 탭이 나타납니다. 사이트아이덴티에서 로고는 변경해주세요. 이전 포스트에서 변경했던 다크모드 로고와 동일한 사이즈로 변경하는게 깔끔하겠지요? 하단에 브라우저 아이콘을 변경 할 수 있는 기능도 보이지만, 저는 현재 아이콘이 마음에 들기 때문에 그대로 유지 했습니다. 웹사이트 제목 변경하기 로고와 이어서 하단에 사..

워드프레스 2023.03.09

워드프레스 뷰튜브 만들기 2편(초기설정1) 나만의 유튜브 공간(로고변경,바닥정보,팝업창)

워드프레스에서 뷰튜브 테마 설치가 완료 되었다면, 기초 설정을 해보겠습다. ​ 1.헤더 다크모드 로고 변경 뷰튜브 설정에서 헤더 ->다크모드 로고 -> 업로드 -> 이미지 파일 업로드 후 등록 다크모드에서만 변경 되기 때문에, 일반 모드에서 로고는 따로 변경해줘야합니다. *그 부분은 따로 설명드리겠습니다. 다크모드이기 때문에 로고 이미지의 색상은 투명 바탕에 흰색으로 하시는 것을 추천드려요~ 그리고 꼭 저장 까지 잊지 마세요. 로고 사이즈는 512 * 85 픽셀입니다. 다크모드에서 로고가 잘 들어가졌네요 ^^ 2.팝업 띄우기 첫접속시 보여주는 팝업창을 설정합니다. 필요하지 않다면 옵션을 off 해주세요 모달에서 on으로 변경합니다. 그리고 팝업창에 들어갈 이미지를 업로드하여 등록하고, 제목과 내용을 입력..

워드프레스 2023.03.09
반응형